基于MVC3方式实现下拉列表联动(JQuery)

2020-05-24 21:25:57易采站长站整理

$(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。
如有大家对上述说法有异议或者更好的实现方案,请给予指正或说明,谢谢。