基于原生Javascript开发的省市三级联动选择器
核心js代码:
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.innerText = 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; };
项目地址:传送门
仅供学习,如有不当或需改进之处,请君指出,感谢万分!!!