JS 之 下拉框三級聯動（一）
阿新 • • 發佈：2019-01-04
<!DOCTYPE html> <html> <head> <title>純JS省市區聯動</title> <script type="text/javascript" src="jsAddress.js"></script> </head> <body> <div> 省：<select id="cmbProvince"></select> 市：<select id="cmbCity"></select> 區：<select id="cmbArea"></select> <br /><br /> 省：<select id="Select1"></select> 市：<select id="Select2"></select> 區：<select id="Select3"></select> <script type="text/javascript"> addressInit('cmbProvince', 'cmbCity', 'cmbArea', '陝西', '寶雞市', '金臺區'); addressInit('Select1', 'Select2', 'Select3'); </script> </div> </body> </html>
var addressInit = function(_cmbProvince, _cmbCity, _cmbArea, defaultProvince, defaultCity, defaultArea) { var cmbProvince = document.getElementById(_cmbProvince); var cmbCity = document.getElementById(_cmbCity); var cmbArea = document.getElementById(_cmbArea); 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) { var option = document.createElement("OPTION"); cmb.options.add(option); option.innerHTML = str; option.value = str; option.obj = obj; } function changeCity() { cmbArea.options.length = 0; if(cmbCity.selectedIndex == -1)return; var item = cmbCity.options[cmbCity.selectedIndex].obj; for(var i=0; i<item.areaList.length; i++) { cmbAddOption(cmbArea, item.areaList[i], null); } cmbSelect(cmbArea, defaultArea); } function changeProvince() { cmbCity.options.length = 0; cmbCity.onchange = null; if(cmbProvince.selectedIndex == -1)return; var item = cmbProvince.options[cmbProvince.selectedIndex].obj; for(var i=0; i<item.cityList.length; i++) { cmbAddOption(cmbCity, item.cityList[i].name, item.cityList[i]); } cmbSelect(cmbCity, defaultCity); changeCity(); cmbCity.onchange = changeCity; } for(var i=0; i<provinceList.length; i++) { cmbAddOption(cmbProvince, provinceList[i].name, provinceList[i]); } cmbSelect(cmbProvince, defaultProvince); changeProvince(); cmbProvince.onchange = changeProvince; } var provinceList = [ {name:'北京', cityList:[ {name:'市轄區', areaList:['東城區','西城區','崇文區','宣武區','朝陽區','豐臺區','石景山區','海淀區','門頭溝區','房山區','通州區','順義區','昌平區','大興區','懷柔區','平谷區']}, {name:'縣', areaList:['密雲縣','延慶縣']} ]}, {name:'上海', cityList:[ {name:'市轄區', areaList:['黃浦區','盧灣區','徐彙區','長寧區','靜安區','普陀區','閘北區','虹口區','楊浦區','閔行區','寶山區','金山區','松江區','青浦區','南匯區','奉賢區']}, {name:'縣', areaList:['崇明縣']} ]} ];
