上次項目中遇到一個需要多個下拉列表聯動的操作，今天有空將實現方式整理以便以後參考。
要達到的效果是，點擊一個下拉框，則另一個下拉框的值發生對應變化。如：選擇中國，則另個一下拉框裡顯示中國各個省份。
傳統的HTML方式比較簡單，實際上基於MVC的實現方式也大同小異。
直接上代碼：
. 代碼如下:
public class DP_Provice
{
public int proviceID { get; set; }
public string ProviceName { get; set; }
public int ProviceNode { get; set; }
public virtual List<DP_City> citySource { get; set; }
}
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<DP_Provice> InitalData()
{
List<DP_Provice> source = new List<DP_Provice>
{
new DP_Provice{ ProviceNode=1, ProviceName="北京", citySource=new List<DP_City>{
new DP_City{
CityNode=11, CityName="北京海澱"
},
new DP_City{
CityNode=12,CityName="北京西城"
}
}},
new DP_Provice{ ProviceNode=2, ProviceName="山東", citySource=new List<DP_City>{
new DP_City{
CityNode=21, CityName="濟南"
},
new DP_City{
CityNode=22,CityName="德州"
}
}},
new DP_Provice{ ProviceNode=3, ProviceName="河北", citySource=new List<DP_City>{
new DP_City{
CityNode=31, CityName="石家莊"
},
new DP_City{
CityNode=32,CityName="衡水"
}
}}
};
return source;
}
}
具體在Controller中的調用，因為使用的JQuery中的AJAX方式，所以返回的結果類型為Json;
. 代碼如下:
public ActionResult Index()
{
return View("DPShow");
}
List<DP_Provice> source = DPDataSource.InitalData();
public JsonResult GetProvinceSource()
{
if (source == null || source.Count < 0)
{
source = DPDataSource.InitalData();
}
return Json(source, JsonRequestBehavior.AllowGet);
}
public JsonResult GetCitySource(string proviceName)
{
source = DPDataSource.InitalData();
List<DP_City> citySource = new List<DP_City>();
citySource = source.Where(a => a.ProviceNode.ToString().Contains(proviceName)).First().citySource;
return Json(citySource, JsonRequestBehavior.AllowGet);
}
數據准備完畢，此時需要Razor視圖中進行綁定和展示，代碼如下：
. 代碼如下:
@model MvcApplication.Models.DP_Provice
@{
ViewBag.Title = "DPShow";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
$(function myfunction() {
GetPlant();
//初始化省份數據
$("#ddlProvince").change(function ff() { //設置當省份下拉列表發生變化時，更新城市數據列表
GetCity();
});
});
function GetPlant() {
$("#ddlProvince").empty();
var url = "/Dropdown/GetProvinceSource/";
$.getJSON(url, function (data) {
$.each(data, function (i, item) {
$("<option></option>")
.val(item["ProviceNode"])
.text(item["ProviceName"])
.appendTo($("#ddlProvince"));
});
GetCity();
});
}
function GetCity() {
$("#ddlCity").empty();
var temp=$("#ddlProvince").val();
var url ="@Url.Action("GetCitySource", "Dropdown")" ;
//使用MVC3中Url.Action 方法參數依次為：aciton ; controller ; area ;
$.getJSON(url,{"proviceName":temp}, function (data) {
//中間需要用到參數 所以采用在getJSON方法中實現
$.each(data, function (i, item) {
$("<option></option>")
.val(item["CityNode"])
.text(item["CityName"])
.appendTo($("#ddlCity"));
});
});
}
</script>
<! DOCTYPE html />
<h2>
下拉列表聯動</h2>
<table>
<tr>
<td>
<select id="ddlProvince" />
</td>
<td>
<select id="ddlCity" />
</td>
</tr>
</table>
說明：
一般來講，采用MVC實現下拉列表綁定可以有多種方式，主要是數據綁定方式可以使用JQuery中的Ajax 方式，同時也可以使用自定義的基於MVC 的 Url.Acion 方式，個人建議使用基於MVC 的 Url.Acion。
一來是支持方式比較靈活，如果中間涉及到數據類型復雜，可以自定義，實現數據封裝；
二來是JQuery 中URL在傳遞參數時需要格式化，否則將無法找到指定的Action。
如有大家對上述說法有異議或者更好的實現方案，請給予指正或說明，謝謝。