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');// 下拉框選擇聯動