用JQuery做出三级联动

　　话说，这一天我想做一个无刷新的三级联动，就查了一下网页，当然也有园子里的同志们的文章，美其名曰“借鉴”和“参考”。如下：

我没有写数据库，我懒！

   城市：

public class City
    {
        public int ID { get; set; }
        public int pID { get; set; }
        public string Name { get; set; }
    }

地区：

  public class District
    {
        public int ID { get; set; }
        public int cID { get; set; }
        public string Name { get; set; }
    }

省份：

    public class Province
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }

后台控制器代码：AjaxController：

  public class AjaxController : Controller
        {
            //
            // GET: /Ajax/

            /// <summary>
            /// 获取所有［省份］数据
            /// </summary>
            public ActionResult GetProvinceList()
            {
                if (!Request.IsAjaxRequest())
                {
                    return Content("请不要非法方法,这是不道德的行为！");
                }
                var provinces = new List<Province>();
                provinces.Add(new Province { ID = 1, Name = "安徽" });
                provinces.Add(new Province { ID = 2, Name = "浙江" });
                return Json(provinces, JsonRequestBehavior.AllowGet);
            }

            /// <summary>
            /// 获取某［省份］的所有［城市］数据
            /// </summary>
            public ActionResult GetCityList(int id)
            {
                if (!Request.IsAjaxRequest())
                {
                    return Content("请不要非法方法,这是不道德的行为！");
                }
                var cities = new List<City> {
                    new City { ID = 1, pID = 1, Name = "宿州" } ,
                    new City { ID = 2, pID = 1, Name = "淮北" },
                    new City { ID = 3, pID = 2, Name = "杭州" },
                    new City { ID = 4, pID = 2, Name = "南京" }
                };
                 var cities_ = new List<City>();
                foreach (var item in cities)
                {
                    if (item.pID == id)
                    { cities_.Add(item); }
                }
                return Json(cities_, JsonRequestBehavior.AllowGet);
            }

            /// <summary>
            /// 获取某［城市］的所有［市区］数据
            /// </summary>
            public ActionResult GetDistrictList(int id)
            {
                if (!Request.IsAjaxRequest())
                {
                    return Content("请不要非法方法,这是不道德的行为！");
                }

                var districts = new List<District> {
                new District { ID = 1, cID = 1, Name = "A" },
                new District { ID = 2, cID = 1, Name = "B" },
                new District { ID = 3, cID = 2, Name = "C" },
                new District { ID = 4, cID = 2, Name = "D" },
                new District { ID = 5, cID = 3, Name = "E" },
                new District { ID = 6, cID = 3, Name = "F" },
                new District { ID = 7, cID = 4, Name = "G" },
                new District { ID = 8, cID = 4, Name = "H" }
                };
                var districts_ = new List<District>();
                   foreach (var item in districts)
                {
                    if (item.cID == id)
                    { districts_.Add(item); }
                }
                return Json(districts_, JsonRequestBehavior.AllowGet);
            }

        }

最后是视图：

    <script src="http://www.cnblogs.com/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/AJAX.js" type="text/javascript"></script>
    <table>
        <tr>
            <td>
                <select id="ddlProvince"  name="ddlProvince" />
            </td>
            <td>
                <select id="ddlCity" name="ddlCity" />
            </td>
            <td>
                <select id="ddlDistrict"  name="ddlDistrict"/>
            </td>
        </tr>
    </table>

其中：AJAX.js代码：

$(document).ready(function () {
    GetByJquery();
    $("#ddlProvince").change(function () { GetCity() });
    $("#ddlCity").change(function () { GetDistrict() });
});

function GetByJquery() {

    $("#ddlProvince").empty(); //清空省份SELECT控件

    $.getJSON("/Ajax/GetProvinceList", function (data) {
        $.each(data, function (i, item) {
            $("<option></option>")
                    .val(item["ID"])
                    .text(item["Name"])
                    .appendTo($("#ddlProvince"));
        });
        GetCity();
    });

}

function GetCity() {

    $("#ddlCity").empty(); //清空城市SELECT控件
    var url = "/Ajax/GetCityList/" + $("#ddlProvince").val();
    $.getJSON(url, function (data) {
        $.each(data, function (i, item) {
            $("<option></option>")
                    .val(item["ID"])
                    .text(item["Name"])
                    .appendTo($("#ddlCity"));
        });
        GetDistrict();
    });
}

function GetDistrict() {
    $("#ddlDistrict").empty(); //清空市区SELECT控件
    var url = "/Ajax/GetDistrictList/" + $("#ddlCity").val();

    $.getJSON(url, function (data) {
        $.each(data, function (i, item) {
            $("<option></option>")
                    .val(item["ID"])
                    .text(item["Name"])
                    .appendTo($("#ddlDistrict"));
        });
    });
}

恩，就是这样，其实这个JQuery代码我看得懂，但是让我写的话，我写不出来，说了是“借鉴来的”！不过我很快就会记住的。

How about you?