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