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

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

界面效果如图：

View层代码：

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

<input type="hidden" id="hidProvinceId" name="hidProvinceId" value="@Model.provinceId" />
<input type="hidden" id="hidCityId" name="hidProvinceId" value="@Model.cityId" />
<input type="hidden" id="hidDistrictId" name="hidProvinceId" value="@Model.distId" />
<input type="hidden" id="hidStreetId" name="hidStreetId" value="@Model.streetId" />
<input type="hidden" id="hidNeighbId" name="hidNeighbId" value="@Model.neighborhoodId" />
<div class="width100 clearfix">
    <div class="width33" style="position:relative">
        @Html.DropDownList("ddlEProvince", prolist, "请选择省", new { @onChange = "ddlEOnChange('ddlEProvince','ddlECity','/Base/GetCitys',1)", @style = "margin-top:0;", @class = "IsError IsRequired", @MsgName = "省份" })
    </div>
    <div class="width33" style="position:relative;margin-top:20px;">
        <select style="margin-top:0;" class="IsError IsRequired" id="ddlECity" MsgName="城市" οnchange="ddlEOnChange('ddlECity','ddlEDistrict','/Base/GetDistricts',2)">  <option value="">请选择城市</option></select>
    </div>
    <div class="width33" style="position:relative;margin-top:20px;">
        <select style="margin-top:0;" class="IsError IsRequired" id="ddlEDistrict" MsgName="区/县" οnchange="ddlEOnChange('ddlEDistrict','ddlEStreet','/Base/GetStreets',3)">  <option value="">请选择区/县</option></select>
    </div>

    <div class="width33" style="position:relative;margin-top:20px;">

        <select style="margin-top:0;" class="IsError IsRequired" id="ddlEStreet" MsgName="街道" οnchange="ddlEOnChange('ddlEStreet','ddlENeighborhood','/Base/GetNeighborhoods',4)"><option value="">请选择街道</option></select>
    </div>
    <div class="width33" style="position:relative;margin-top:20px;">
        <select style="margin-top:0;" class="IsError IsRequired" id="ddlENeighborhood" MsgName="小区">
            <option value="">请选择小区</option>
        </select>
    </div>
</div>
<div>

所有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 = '<option value="' + e.Value + '">' + e.Text + '</option>'
                    $("#" + ddlChild).append(option);
                });

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

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

控制器代码：获得数据源

 /// <summary>
        /// 获得省列表》
        /// </summary>
        /// <param name="provinceId"></param>
        /// <returns></returns>

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

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


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

                DLXStaticObject.CityList = citys;
            }

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

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


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