基於MVC3方式實作下拉列表連動(JQuery)_jquery
- WBOY原創
- 2016-05-16 17:23:561307瀏覽
上次專案中遇到一個需要多個下拉清單連動的操作，今天有空將實作方式整理以便日後參考。
要達到的效果是，點選一個下拉框，則另一個下拉框的值會發生對應變化。如：選擇中國，則另一個一下拉框裡顯示中國各省。
傳統的HTML方式較簡單，實際上基於MVC的實作方式也大同小異。
直接上碼：
複製程式碼 程式碼如下:
程式碼如下:
DP_Provice
{
public int proviceID { get; set; }
public string ProviceName { get; set; }
public int ProviceNode { get; set; }
public virtual List
public class DP_City
{
public int CityNode { get; set; }
public string CityName { get; set; }
public string ProviceNode { get; set; }
程式碼如下:
public static class DPDataSource
{
public static List
{
List source = new List
{
new DP_Provice{ ProviceNode=1, ProviceName="北京", citySource=new List{
new DP_City{
CityNode=11, CityName="北京海淀"
},
new DP_City{
CityNode=12,CityName="北京西城"
}
}},
new DP_Provice{ ProviceNode=2, ProviceName="山東", citySource=new List{
new DP_City{
CityNode=21, CityName="濟南"
},
CityNode=21, CityName="濟南"
},
},
new DP_City{
CityNode=22,CityName="德州"
}
}},
new DP_Provice{ ProviceNode=3, ProviceName="河北", citySource=new List{
new DP_City{
CityNode=31, CityName="石家莊"
},
new DP_City{
CityNode=32,CityName="衡水"
}
}}
}
} >}; public static class DPDataSource
{
public static List
{
List
{
new DP_Provice{ ProviceNode=1, ProviceName="北京", citySource=new List
new DP_City{
CityNode=11, CityName="北京海淀"
},
new DP_City{
CityNode=12,CityName="北京西城"
}
}},
new DP_Provice{ ProviceNode=2, ProviceName="山東", citySource=new List
new DP_City{
CityNode=21, CityName="濟南"
},
CityNode=21, CityName="濟南"
},
},
new DP_City{
CityNode=22,CityName="德州"
}
}},
new DP_Provice{ ProviceNode=3, ProviceName="河北", citySource=new List
new DP_City{
CityNode=31, CityName="石家莊"
},
new DP_City{
CityNode=32,CityName="衡水"
}
}}
}
return source;
複製程式碼
程式碼如下:
return View("DPShow");
}
List
public JsonResult GetProvinceSource()
{
public JsonResult GetProvinceSource()
{
if>if source == null || source.Count {
source = DPDataSource.InitalData();
}
return Json(source, JsonRequestBehavior.AllowGet)； >public JsonResult GetCitySource(string proviceName)
{
source = DPDataSource.InitalData();
Source => a.ProviceNode.ToString().Contains(proviceName)).First().citySource;
return Json(citySource, JsonRequestBehavior.AllowGet);
} }
複製程式碼 程式碼如下:@model MvcApplication.Models.DP_Provice
@{
ViewBag.Title = "DPShow";
Layout = "~/Views/Shared/_Layout.cshtml";