快捷導(dǎo)航

基于MVC3方式實現(xiàn)下拉列表聯(lián)動(JQuery)

更新時間：2013年09月02日 18:00:28 作者：

點擊一個下拉框，則另一個下拉框的值發(fā)生對應(yīng)變化。如：選擇中國，則另個一下拉框里顯示中國各個省份，具體實現(xiàn)如下，感興趣的朋友可以參考下

上次項目中遇到一個需要多個下拉列表聯(lián)動的操作，今天有空將實現(xiàn)方式整理以便以后參考。
要達到的效果是，點擊一個下拉框，則另一個下拉框的值發(fā)生對應(yīng)變化。如：選擇中國，則另個一下拉框里顯示中國各個省份。
傳統(tǒng)的HTML方式比較簡單，實際上基于MVC的實現(xiàn)方式也大同小異。

直接上代碼：

復(fù)制代碼代碼如下:

 
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; } 
} 

對以上涉及到的實體類予以賦值，暫時使用一個靜態(tài)類初始化簡單數(shù)據(jù)：

復(fù)制代碼代碼如下:

 
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中的調(diào)用，因為使用的JQuery中的AJAX方式，所以返回的結(jié)果類型為Json;

復(fù)制代碼代碼如下:

 
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); 
} 

數(shù)據(jù)準備完畢，此時需要Razor視圖中進行綁定和展示，代碼如下：

復(fù)制代碼代碼如下:

 
@model MvcApplication.Models.DP_Provice 
@{ 
ViewBag.Title = "DPShow"; 
Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
<script type="text/javascript"> 
$(function myfunction() { 
GetPlant(); 
//初始化省份數(shù)據(jù) 
$("#ddlProvince").change(function ff() { //設(shè)置當省份下拉列表發(fā)生變化時，更新城市數(shù)據(jù)列表 
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 方法參數(shù)依次為：aciton ; controller ; area ; 

$.getJSON(url,{"proviceName":temp}, function (data) { 
//中間需要用到參數(shù) 所以采用在getJSON方法中實現(xiàn) 
$.each(data, function (i, item) { 
$("<option></option>") 
.val(item["CityNode"]) 
.text(item["CityName"]) 
.appendTo($("#ddlCity")); 
}); 
}); 
} 
</script> 
<! DOCTYPE html /> 
<h2> 
下拉列表聯(lián)動</h2> 
<table> 
<tr> 
<td> 
<select id="ddlProvince" /> 
</td> 
<td> 
<select id="ddlCity" /> 
</td> 
</tr> 
</table> 

說明：
一般來講，采用MVC實現(xiàn)下拉列表綁定可以有多種方式，主要是數(shù)據(jù)綁定方式可以使用JQuery中的Ajax 方式，同時也可以使用自定義的基于MVC 的 Url.Acion 方式，個人建議使用基于MVC 的 Url.Acion。
一來是支持方式比較靈活，如果中間涉及到數(shù)據(jù)類型復(fù)雜，可以自定義，實現(xiàn)數(shù)據(jù)封裝；
二來是JQuery 中URL在傳遞參數(shù)時需要格式化，否則將無法找到指定的Action。
如有大家對上述說法有異議或者更好的實現(xiàn)方案，請給予指正或說明，謝謝。

您可能感興趣的文章: