JQ与AJAX 省市区三级联动下拉框

用于初学者学习基本的联动下拉框，废话不多说，见代码

首先看控制器里的3个下拉框对应代码：

public ActionResult GetProvinceList()
{
ProvinceRepository rep = new ProvinceRepository();
var selectlist = new SelectList(rep.GetProvinceList(), "ProvinceID", "ProvinceName");
return Json(selectlist);
}

public ActionResult GetCityList(string text)
{
CityRepository rep = new CityRepository();
var selectlist = new SelectList(rep.GetCityList(text), "CityID", "CityName");
return Json(selectlist);
}

public ActionResult GetAreaList(string text)
{
DistrictRepository rep = new DistrictRepository();
var selectlist = new SelectList(rep.GetAreaList(text), "AreaID", "AreaName");
return Json(selectlist);
}

接着，控制器非别去定义的Repository里面向数据库读取数据，并返回

LinkageDataContext db = new LinkageDataContext();

public IQueryable GetProvinceList()
{
var name = from m in db.province select m;
return name;
}

LinkageDataContext db = new LinkageDataContext();

public IQueryable GetCityList(string text)
{
var res = from m in db.city.Where(e => e.father == text) select m;
return res;
}

LinkageDataContext db = new LinkageDataContext();

public IQueryable GetAreaList(string text)
{
var res = from m in db.area.Where(e => e.father == text) select m;
return res;
}

其实以上三个Repository可以合成一个，不过本人为了后续个别设计就分开了，读者可自行设计。接下来就是View里面的代码，View里面分为两块，一块就是下拉框的Html，另一块就是JS代码实现数据联动。本人是用的Telerik形式。

<h>省：</h>
<title>菜单联动</title>
<%= Html.Telerik().DropDownList()
.Name("EmpProvince")
.DataBinding(databingding => databingding.Ajax()
.Select("GetProvinceList", "Home"))
%>

<h>市：</h>
<%= Html.Telerik().DropDownList()
.Name("EmpCity")

%>

<h>区：</h>
<%= Html.Telerik().DropDownList()
.Name("EmpArea")

%>

接下来是JS的代码了。

$(function () {
$('#EmpProvince').bind('valueChange', onEmpProvinceChangeCity);
$('#EmpCity').bind('valueChange', onEmpProvinceChangeCity2);

})
function onEmpProvinceChangeCity() {
var dropDownList = $('#EmpCity').data('tDropDownList');
var dropDownList3 = $('#EmpArea').data('tDropDownList');
dropDownList3.dataBind(null);
var text = $("#EmpProvince").data("tDropDownList").value();
getLinkageDatas(dropDownList,
text,
"DropDownListPrvUCity",
"获取城市联动数据失败!");
}

function onEmpProvinceChangeCity2() {
var dropDownList = $('#EmpArea').data('tDropDownList');
var text = $("#EmpCity").data("tDropDownList").value();
getLinkageDatas2(dropDownList,
text,
"DropDownListPrvUCity",
"获取城市联动数据失败!");
}

function getLinkageDatas(dropDownList, text, action, message) {
if (text == "") {
dropDownList.dataBind(null);

return;
}

$.ajax({
type: "Post",
url: '<%= @Url.Action("GetCityList","Home") %>',
data: { text: text },
dataType: "json",
success: function (data) {
dropDownList.dataBind(data);
},
error: function () {
}
});
}

function getLinkageDatas2(dropDownList, text, action, message) {
if (text == "") {
dropDownList.dataBind(null);
return;
}

$.ajax({
type: "Post",
url: '<%= @Url.Action("GetAreaList","Home") %>',
data: { text: text },
dataType: "json",
success: function (data) {
dropDownList.dataBind(data);
},
error: function () {
}
});
}

需要注意的是，代码的第八第九行是处理清空的情况，就是当重选一级下拉框时，对2级和3级显示的数据清空。

至于Model的话，读者可自行编写了。希望能够帮助到大家。本人也刚学不久，有不足的望指点。