1. 引入区县联动函数如下，将provinceList中数据改为需要联动的数据信息
var addressInit = function(_cmbProvince, _cmbCity, _cmbArea, _cmbStreet, defaultProvince, defaultCity, defaultArea,defaultStreet) ???{ ???????var cmbProvince = document.getElementById(_cmbProvince); ???????var cmbCity = document.getElementById(_cmbCity); ???????var cmbArea = document.getElementById(_cmbArea); ??????var cmbStreet = document.getElementById(_cmbStreet); ?????????????function cmbSelect(cmb, str) ???????{ ???????????for(var i=0; i<cmb.options.length; i++) ???????????{ ???????????????if(cmb.options[i].value == str) ???????????????{ ???????????????????cmb.selectedIndex = i; ???????????????????return; ???????????????} ???????????} ???????} ???????function cmbAddOption(cmb, str, obj, num) ???????{ ???????????var option = document.createElement(‘OPTION‘); ???????????cmb.options.add(option); ???????????option.innerText = str; ???????????option.value = num; ???????????option.obj = obj; ??????????console.log(num) ????} ??????????????????function changeProvince() ???????{ ???????????cmbCity.options.length = 0; ???????????cmbCity.onchange = null; ???????????if(cmbProvince.selectedIndex == -1)return; ???????????var item = cmbProvince.options[cmbProvince.selectedIndex].obj; ???????/**console.log(item)**/ ???????????for(var i=0; i<item.cityList.length; i++) ???????????{ ???????????????cmbAddOption(cmbCity, item.cityList[i].name, item.cityList[i],item.cityList[i].sleep); ??????????} ???????????cmbSelect(cmbCity, defaultCity); ???????} ???????????????for(var i=0; i<provinceList.length; i++) ???????{ ???????????cmbAddOption(cmbProvince, provinceList[i].name, provinceList[i],provinceList[i].sleep); ???????} ???????cmbSelect(cmbProvince, defaultProvince); ???????changeProvince(); ???????cmbProvince.onchange = changeProvince; ???} ???/*用到的所有sleep为自定义属性，sleep可以自定义为指定数据，便于前后端数据交互*/ ???var provinceList = [ ?????{name:‘全部‘,sleep:‘0‘,//省级 ???????cityList:[//市级 ???????????{name:‘全部‘,sleep:‘0‘, ???????????????areaList:[//区县级 ???????????????????{name:‘全部‘,sleep:‘0‘} ???????????????] ???????????} ???????] ???}, ??????????{name:‘陕西省‘,sleep:‘1‘, ????????cityList:[ ??????????????????????????{name:‘全部‘,sleep:‘0‘, ???????????????areaList:[ ???????????????????{name:‘全部‘,sleep:‘0‘} ???????????????] ???????????}, ?????????????????????{name:‘西安市‘,sleep:‘1‘, ???????????????areaList:[ ???????????????????{name:‘全部‘,sleep:‘0‘}, ???????????????????{name:‘鄠邑区‘,sleep:‘1‘}, ???????????????????{name:‘高新区‘,sleep:‘2‘} ???????????????] ???????????}, ?????????????{name:‘渭南市‘,sleep:‘2‘, ???????????????areaList:[ ???????????????????{name:‘全部‘,sleep:‘0‘}, ???????????????????{name:‘大荔县‘,sleep:‘1‘}, ???????????????????{name:‘蒲城县‘,sleep:‘2‘} ???????????????] ???????????} ???????] ???}, ??????????{name:‘浙江省‘,sleep:‘2‘, ????????cityList:[ ?????????????????????????{name:‘全部‘,sleep:‘0‘, ???????????????areaList:[ ???????????????????{name:‘全部‘,sleep:‘0‘}, ???????????????????{name:‘杭州市‘,sleep:‘1‘}, ???????????????????{name:‘宁波市‘,sleep:‘2‘} ???????????????] ???????????}, ??????????????????????{name:‘杭州市‘,sleep:‘1‘, ???????????????areaList:[ ???????????????????{name:‘全部‘,sleep:‘0‘}, ???????????????????{name:‘萧山区‘,sleep:‘1‘}, ???????????????????{name:‘富阳区‘,sleep:‘2‘} ???????????????] ???????????}, ?????????????{name:‘宁波市‘,sleep:‘2‘, ???????????????areaList:[ ???????????????????{name:‘全部‘,sleep:‘0‘}, ???????????????????{name:‘江东区‘,sleep:‘1‘}, ???????????????????{name:‘镇海区‘,sleep:‘2‘} ???????????????] ???????????} ????????????????????????] ???}]; ??2. 在需要联动的页面调用addressInit()联动函数
addressInit(‘省id‘,‘市id‘,‘区县id‘);// 下拉框选择联动
js实现区县联动
原文地址：https://www.cnblogs.com/wyp-AY/p/9363178.html