茫茫網海中的冷日 - 對這文章發表回應
茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1670361 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
IMG_2412184.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

對這文章發表回應

發表限制: 非會員 可以發表

發表者: 冷日 發表時間: 2012/11/12 16:11:46
用jQuery做連動式下拉選單

產生鄉鎮市區的下拉選單的Helper
//多寫一個帶兩個參數的方法,方法內去呼叫三個參數的方法
         public static string Residence(this HtmlHelper helper, string id, string name)
         {
             return Residence(helper, id, name, null);
         }
        //郵遞區號+鄉鎮市區的下拉選單
        //最後多加一個可以自訂屬性的參數
        public static string Residence(this HtmlHelper helper,string id,string name, object  htmlAttributes)
        {
            MyDataContext db =new MyDataContext();
            TagBuilder tag = new TagBuilder("select");
            tag.GenerateId(id);
            tag.MergeAttribute("name",name);
            tag.MergeAttributes(new RouteValueDictionary(htmlAttributes));
            foreach(var m in db.Regions){
                tag.InnerHtml += "<option class='sub_" + m.Region_縣市 + "' value='"
                + m.Residence_鄉鎮市區 + "'>" + m.Residence_鄉鎮市區 + "</option>";
            }
            return tag.ToString();
        }


在View上

<%=Html.Region("Region", "Region")%>
<select id="Residence" name="Residence"><option value="0">行政區</option></select>
<%=Html.Residence("RegionResidence", "RegionResidence", new { style = "display:none" })%>

第一行一樣是地區的下拉選單
第二行是下拉選單,但是一開始只有"行政區"一個選擇
第三行是所有縣市區域的下拉選單,但是把它設為隱藏
改成這樣之後,jQuery的程式碼就大大的減少了
        $(function () {
            makeRegion("Region", "Residence");
        });
        function makeRegion(parent, child) {
            $("#" + parent).change(function () {
              var AddAttr = $("#" + parent).attr("value");
              $("#" + child).html($("#" + parent + child + " .sub_" + AddAttr).clone());
              if (AddAttr == "0") {
                    $("#" + child).html("<option value='0'>行政區</option>");
              }
            });
        };

2-4行在頁面ready之後去呼叫一個function
6-14行是function主體
第7行再說當地區的下拉選單改變時,呼叫一個匿名的function這個function做的第一件事,就是先把選到的地區欄位的value值存在AddAttr裡面
第9行是說把隱藏的所有鄉鎮市區的下拉選單中,所有Class符合AddAttr的option複製到空白的下拉選單中
第10行做了一個判斷,如果AddAttr的value是0,也就是選到"請選擇縣市"的時候將鄉鎮市區的option改為行政區。


原文出處:CodeCharge TAIWAN • 檢視主題 - 用jQuery做連動式下拉選單
內容圖示
url email imgsrc image code quote
樣本
bold italic underline linethrough   












 [詳情...]
validation picture

注意事項:
預覽不需輸入認證碼,僅真正發送文章時才會檢查驗證碼。
認證碼有效期10分鐘,若輸入資料超過10分鐘,請您備份內容後,重新整理本頁並貼回您的內容,再輸入驗證碼送出。

選項

Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|