基于jQuery+JSON的省市联动效果

省市区联动下拉效果在WEB中应用非常广泛，尤其在一些会员信息系统、电商网站最为常见。开发者一般使用Ajax实现无刷新下拉联动。本文将讲述，利用jQuery插件，通过读取JSON数据，实现无刷新动态下拉省市二（三）级联动效果。

 <label>
            <span>住址（省市区）：</span>
            @Html.DropDownList("Province",ViewData["Province"] as SelectList,"请选择",new { @class = "m-wrap small" })
            @Html.DropDownList("City",ViewData["City"] as SelectList,new { @class = "m-wrap small" })
            @Html.DropDownList("Area",ViewData["Area"] as SelectList,new { @class = "m-wrap small" })
           
        </label>

<label>
            <span>住址（省市区）：</span>
            <select class="m-wrap small" id="Province" name="Province"><option value="">请选择</option>
<option value="110000">北京</option>
<option value="120000">天津</option>
<option value="130000">河北</option>
<option value="140000">山西</option>
<option value="150000">内蒙古</option>
<option value="160000">辽宁</option>
<option value="170000">吉林</option>
<option value="180000">黑龙江</option>
<option value="190000">上海</option>
<option value="200000">江苏</option>
<option value="210000">浙江</option>
<option value="220000">安徽</option>
<option value="230000">福建</option>
<option value="240000">江西</option>
<option value="250000">山东</option>
<option value="260000">河南</option>
<option value="270000">湖北</option>
<option value="280000">湖南</option>
<option value="290000">广东</option>
<option value="300000">广西</option>
<option value="310000">海南</option>
<option value="320000">重庆</option>
<option value="330000">四川</option>
<option value="340000">贵州</option>
<option value="350000">云南</option>
<option value="360000">西藏</option>
<option value="370000">陕西</option>
<option value="380000">甘肃</option>
<option value="390000">青海</option>
<option value="400000">宁夏</option>
<option value="410000">新疆</option>
<option value="420000">香港</option>
<option value="430000">澳门</option>
<option value="440000">台湾</option>
</select>
            <select class="m-wrap small" id="City" name="City"><option value="">请选择</option>
</select>
            <select class="m-wrap small" id="Area" name="Area"><option value="">请选择</option>
</select>
           
        </label>

<script type="text/javascript">
    $(document).ready(function () {
        var Province = $("#Province").val();
        var City = $("#City").val()
        if (Province != "" && City=="") {
            setCity();
        }
        if (City != "" && $('#Area').val() == "") {
            setArea();
        }
        $("#Province").change(function () {
            setCity();
        });

        $("#City").change(function () {
            setArea();
        });
        function setCity() {

            $('#City').html('').append($("<option value=''>请选择</option>"));
            $('#Area').html('').append($("<option value=''>请选择</option>"));
            if($("#Province").val()!=""){
                $.getJSON('@Url.Action("GetCitys")',{ code: $("#Province").val() },function (data) {
                    $.each(data,function (i,item) {
                        $('#City').append($("<option></option>").val(item.code).html(item.name));
                    });
                    setArea();
                });
                    
                }
        }
        function setArea() {
            $('#Area').html('').append($("<option value=''>请选择</option>"));
            if($("#City").val()!=""){
                $.getJSON('@Url.Action("GetAreas")',{ code: $("#City").val() },function (data) {
                    
                    $.each(data,item) {
                        $('#Area').append($("<option></option>").val(item.code).html(item.name));
                    });
                });
            }
            }
        });
</script>

[AuthorizeIgnore]
        public JsonResult GetCitys(string code)
        {

            var city = AreaService.GetCities(code);
            return Json(city.ToList<City>(),JsonRequestBehavior.AllowGet);

        }

        [AuthorizeIgnore]
        public JsonResult GetAreas(string code)
        {

            var area = AreaService.GetAreas(code);
            JsonResult json = Json(area.ToList<Area>(),JsonRequestBehavior.AllowGet);
            return json;

        }

 public void InitViewData(ClientRequest request)
        {
            
            List<SelectListItem> list = new List<SelectListItem> { 
                new SelectListItem { Text = "全部",Value = "-1",Selected = (request.IsActive==-1 ? true : false)},new SelectListItem { Text = "是",Value = "1",Selected = (request.IsActive==1 ? true : false)},new SelectListItem { Text = "否",Value = "0",Selected = (request.IsActive==0 ? true : false) } };
            ViewData["IsActive"] = list; 
            var provance = this.AreaService.GetProvinces();
            ViewData["Province"] = from a in provance
                                   select new SelectListItem
                                   {
                                       Text = a.name,Value = a.code,Selected = request.Province == a.code ? true: false
                                   };
            List<SelectListItem> City = new List<SelectListItem>();
            ViewData["City"] = City;
            if (request.City != null)
            {
                var city = this.AreaService.GetCities(request.Province);
                ViewData["City"] = from a in city
                                   select new SelectListItem
                                   {   
                                       Text = a.name,Selected = request.City == a.code ? true : false
                                   };
            }
            List<SelectListItem> Area = new List<SelectListItem>();
            ViewData["Area"] = Area;
            if (request.Area != null)
            {
                var area = this.AreaService.GetAreas(request.City);
                ViewData["Area"] = from a in area
                                   select new SelectListItem
                                   {
                                       Text = a.name,Selected = request.Area == a.code ? true : false
                                   };
            }
             
        }