asp.net MVC4——省市三級聯動

轉載注明出處：http://www.cnblogs.com/breakman/p/5501971.html 

controller：

public ActionResult GetCity(string id)
        {
            AreaService _areaSvc = new AreaService();
            List<SyArea> syAreaList = _areaSvc.GetList(id);
            return Json(syAreaList, JsonRequestBehavior.AllowGet);
        }
        

        public ActionResult GetCityList()
        {
            return View();
        }

 ，view：

<div>
    <select class="input-text" style="width: 70px;" id="ddlProvince"><option></option></select>
    <select class="input-text" style="width: 70px;" id="ddlCity" name="ddlCity"></select>
    <select class="input-text" style="width: 70px;" name="area_id" id="area_id"></select>
</div>
<script type="text/javascript">
    //省市聯動
    $(document).ready(function () {
        GetByJquery();
        $("#ddlProvince").change(function () { GetCity() });
        $("#ddlCity").change(function () { GetDistrict() });
    });

    function GetByJquery() {
        $("#ddlProvince").empty(); //清空省份SELECT控件
        var url = "/GetArea/GetCity/" + 0;
        $.getJSON(url, function (data) {
            $("<option></option>").val('-1')
                    .text("請選擇")
                    .appendTo($("#ddlProvince"));
            $.each(data, function (i, item) {
                $("<option></option>")
                    .val(item["Area_Code"])
                    .text(item["Area_Name"])
                    .appendTo($("#ddlProvince"));
            });d
            GetCity();
        });
    }

    function GetCity() {
        $("#ddlCity").empty(); //清空城市SELECT控件
        var url = "/GetArea/GetCity/" + $("#ddlProvince").val();
        $.getJSON(url, function (data) {
            $("<option></option>").val('-1')
                   .text("請選擇")
                   .appendTo($("#ddlCity"));
            $.each(data, function (i, item) {
                $("<option></option>")
                    .val(item["Area_Code"])
                    .text(item["Area_Name"])
                    .appendTo($("#ddlCity"));
            });
            GetDistrict();
        });
    }

    function GetDistrict() {
        $("#area_id").empty(); //清空市區SELECT控件
        var url = "/GetArea/GetCity/" + $("#ddlCity").val();
        $.getJSON(url, function (data) {
            $("<option></option>").val('-1')
                      .text("請選擇")
                      .appendTo($("#area_id"));
            $.each(data, function (i, item) {

                $("<option></option>")
                    .val(item["Area_Code"])
                    .text(item["Area_Name"])
                    .appendTo($("#area_id"));
            });
        });
    }
</script>

效果圖：