產生鄉鎮市區的下拉選單的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();
}
代碼: 選擇全部
<%=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>");
}
});
};
6-14行是function主體
第7行再說當地區的下拉選單改變時，呼叫一個匿名的function
這個function做的第一件事，就是先把選到的地區欄位的value值存在AddAttr裡面
第9行是說把隱藏的所有鄉鎮市區的下拉選單中，所有Class符合AddAttr的option複製
到空白的下拉選單中
第10行做了一個判斷，如果AddAttr的value是0，也就是選到"請選擇縣市"的時候
將鄉鎮市區的option改為行政區。