JS 之 下拉框三级联动(一)
2016-01-31 21:32
627 查看
<!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>
<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:['崇明县']} ]} ];
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享
- 如何创建对象以及jQuery中创建对象的方式
- 数组方法汇总