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

来源：互联网发布：企业邮箱软件下载编辑：程序博客网时间：2024/05/20 21:23

省市区联动下拉效果在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, function (i, 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,                                       Value = a.code,                                       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,                                       Value = a.code,                                       Selected = request.Area == a.code ? true : false                                   };            }                     }

1 0