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的话，读者可自行编写了。希望能够帮助到大家。本人也刚学不久，有不足的望指点。