網頁設計 : [轉貼]必學!動態二階選單(雙層選單)

//多寫一個帶兩個參數的方法，方法內去呼叫三個參數的方法
         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();
        }

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

        $(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>");
              }
            });
        };