JQ与AJAX 省市区三级联动下拉框
用于初学者学习基本的联动下拉框，废话不多说，见代码
首先看控制器里的3个下拉框对应代码：
1 public ActionResult GetProvinceList() 2 { 3 ProvinceRepository rep = new ProvinceRepository(); 4 var selectlist = new SelectList(rep.GetProvinceList(), "ProvinceID", "ProvinceName"); 5 return Json(selectlist); 6 } 7 8 public ActionResult GetCityList(string text) 9 { 10 CityRepository rep = new CityRepository(); 11 var selectlist = new SelectList(rep.GetCityList(text), "CityID", "CityName"); 12 return Json(selectlist); 13 } 14 15 public ActionResult GetAreaList(string text) 16 { 17 DistrictRepository rep = new DistrictRepository(); 18 var selectlist = new SelectList(rep.GetAreaList(text), "AreaID", "AreaName"); 19 return Json(selectlist); 20 }
接着，控制器非别去定义的Repository里面向数据库读取数据，并返回
1 LinkageDataContext db = new LinkageDataContext(); 2 3 public IQueryable GetProvinceList() 4 { 5 var name = from m in db.province select m; 6 return name; 7 }
1 LinkageDataContext db = new LinkageDataContext(); 2 3 public IQueryable GetCityList(string text) 4 { 5 var res = from m in db.city.Where(e => e.father == text) select m; 6 return res; 7 }
1 LinkageDataContext db = new LinkageDataContext(); 2 3 public IQueryable GetAreaList(string text) 4 { 5 var res = from m in db.area.Where(e => e.father == text) select m; 6 return res; 7 }
其实以上三个Repository可以合成一个，不过本人为了后续个别设计就分开了，读者可自行设计。接下来就是View里面的代码，View里面分为两块，一块就是下拉框的Html，另一块就是JS代码实现数据联动。本人是用的Telerik形式。
1 <h>省：</h> 2 <title>菜单联动</title> 3 <%= Html.Telerik().DropDownList() 4 .Name("EmpProvince") 5 .DataBinding(databingding => databingding.Ajax() 6 .Select("GetProvinceList", "Home")) 7 %> 8 9 <h>市：</h> 10 <%= Html.Telerik().DropDownList() 11 .Name("EmpCity") 12 13 %> 14 15 <h>区：</h> 16 <%= Html.Telerik().DropDownList() 17 .Name("EmpArea") 18 19 %>
接下来是JS的代码了。
1 $(function () { 2 $('#EmpProvince').bind('valueChange', onEmpProvinceChangeCity); 3 $('#EmpCity').bind('valueChange', onEmpProvinceChangeCity2); 4 5 }) 6 function onEmpProvinceChangeCity() { 7 var dropDownList = $('#EmpCity').data('tDropDownList'); 8 var dropDownList3 = $('#EmpArea').data('tDropDownList'); 9 dropDownList3.dataBind(null); 10 var text = $("#EmpProvince").data("tDropDownList").value(); 11 getLinkageDatas(dropDownList, 12 text, 13 "DropDownListPrvUCity", 14 "获取城市联动数据失败!"); 15 } 16 17 18 19 function onEmpProvinceChangeCity2() { 20 var dropDownList = $('#EmpArea').data('tDropDownList'); 21 var text = $("#EmpCity").data("tDropDownList").value(); 22 getLinkageDatas2(dropDownList, 23 text, 24 "DropDownListPrvUCity", 25 "获取城市联动数据失败!"); 26 } 27 28 function getLinkageDatas(dropDownList, text, action, message) { 29 if (text == "") { 30 dropDownList.dataBind(null); 31 32 return; 33 } 34 35 $.ajax({ 36 type: "Post", 37 url: '<%= @Url.Action("GetCityList","Home") %>', 38 data: { text: text }, 39 dataType: "json", 40 success: function (data) { 41 dropDownList.dataBind(data); 42 }, 43 error: function () { 44 } 45 }); 46 } 47 48 function getLinkageDatas2(dropDownList, text, action, message) { 49 if (text == "") { 50 dropDownList.dataBind(null); 51 return; 52 } 53 54 $.ajax({ 55 type: "Post", 56 url: '<%= @Url.Action("GetAreaList","Home") %>', 57 data: { text: text }, 58 dataType: "json", 59 success: function (data) { 60 dropDownList.dataBind(data); 61 }, 62 error: function () { 63 } 64 }); 65 }
需要注意的是，代码的第八第九行是处理清空的情况，就是当重选一级下拉框时，对2级和3级显示的数据清空。
至于Model的话，读者可自行编写了。希望能够帮助到大家。本人也刚学不久，有不足的望指点。
