.net省 市 县 街道 小区 五级联动实现JS及后台代码

.net+mvc 实现省 市 县 街道 小区 五级联动

界面效果如图：

View层代码：

@model Dlx.Models.ViewModel.System.Sys_BuildingView
@{
    Layout = null;
    IEnumerable prolist = ViewBag.ProvinceList;   
}







    

        @Html.DropDownList("ddlEProvince", prolist, "请选择省", new { @onChange = "ddlEOnChange('ddlEProvince','ddlECity','/Base/GetCitys',1)", @style = "margin-top:0;", @class = "IsError IsRequired", @MsgName = "省份" })
    
    

          请选择城市
    
    

          请选择区/县
    

    


        请选择街道
    
    

        
            请选择小区
        
    

所有JS代码：

 //地区下拉框更改事件
    function ddlEOnChange(ddlthis, ddlChild, url, level) {
        ClearEditDDlArea(level);
        ddlAreaOnChange(ddlthis, ddlChild, url)
    }   

////省市县街道小区 下拉框公共JS
//所有区域下拉框change事件
//ddlthis: 当前下拉框ID; ddlChild: 子级下拉框id; url:后台获得数据URL,  
function ddlAreaOnChange(ddlthis, ddlChild, url, backcall) {
    var pid = $("#" + ddlthis).val();//
    $.ajax({
        url: url,
        type: 'post',
        data: { parentId: pid },
        success: function (data) {
            if (!data.HasError) {
                $(data.Data).each(function (i, e) {
                    var option = '' + e.Text + ''
                    $("#" + ddlChild).append(option);
                });

                // 回调函数
                if (backcall) {
                    backcall();
                }
            }
        },
        error: function (data) {
        }
    });
}

 //地区下拉清理事件
        function ClearEditDDlArea(level) {
        switch (level) {
            case (1):
                $("#ddlECity,#ddlEDistrict,#ddlEStreet,#ddlENeighborhood").empty();
                $("#ddlECity").append('请选择城市');
                $("#ddlEDistrict").append('请选择区/县');
                $("#ddlEStreet").append('请选择街道');
                $("#ddlENeighborhood").append('请选择小区');
                break;
            case (2):
                $("#ddlEDistrict,#ddlEStreet,#ddlENeighborhood").empty();
                $("#ddlEDistrict").append('请选择区/县');
                $("#ddlEStreet").append('请选择街道');
                $("#ddlENeighborhood").append('请选择小区');
                break;
            case (3):
                $("#ddlEStreet,#ddlENeighborhood").empty();
                $("#ddlEStreet").append('请选择街道');
                $("#ddlENeighborhood").append('请选择小区');
                break;
            case (4):
                $("#ddlENeighborhood").empty();
                $("#ddlENeighborhood").append('请选择小区');
                break;
            default:
        }
    }

控制器代码：获得数据源

 /// 

        /// 获得省列表》
        /// 
        /// 
        /// 

        public IEnumerable GetProvinceList(int thisId = 0)
        {
            if (DLXStaticObject.ProvinceList == null || DLXStaticObject.ProvinceList.Count() == 0)
            {
                Bas_AreaBll arelBll = new Bas_AreaBll();
                List province = arelBll.getProveinceList();

                DLXStaticObject.ProvinceList = province;
            }
            IEnumerable items = DLXStaticObject.ProvinceList.Select(c => new SelectListItem
            { Value = c.id.ToString(), Text = c.provinceName, Selected = thisId == c.id ? true : false }).ToList();
            return items;
        }


        /// 

        /// 获得市列表》根据省份ID查询
        /// 
        /// 
        /// 选中的值
        /// 
        [HttpPost]      
        public ActionResult GetCitys(int parentId, int selectedValue = 0)
        {
            if (DLXStaticObject.CityList == null || DLXStaticObject.CityList.Count() == 0)
            {
                Bas_AreaBll arelBll = new Bas_AreaBll();
                List citys = arelBll.getCityList();

                DLXStaticObject.CityList = citys;
            }

            var _city = DLXStaticObject.CityList.Where(o => o.provinceId == parentId);
            List items = _city.Select(c => new SelectListItem
            { Value = c.cityId.ToString(), Text = c.cityName, Selected = selectedValue == c.cityId ? true : false }).ToList();

            return Json(new ReturnData>(false, "", items));
        }


        /// 

        /// 获得区列表》根据省区ID查询
        /// 
        /// 
        /// 
        [HttpPost] 
        public ActionResult GetDistricts(int parentId, int selectedValue = 0)
        {
            if (DLXStaticObject.DistrictList == null || DLXStaticObject.DistrictList.Count() == 0)
            {
                Bas_AreaBll arelBll = new Bas_AreaBll();
                List distrits = arelBll.getDistriList();
                DLXStaticObject.DistrictList = distrits;
            }
            var _district = DLXStaticObject.DistrictList.Where(o => o.cityId == parentId);
            List items = _district.Select(c => new SelectListItem { Value = c.distId.ToString(), Text = c.districtName, Selected = selectedValue == c.distId ? true : false }).ToList();
            return Json(new ReturnData>(false, "", items));
        }