林中侠客

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
纯JS省市区三级联动

不需要访问后台服务器端，不使用Ajax，无刷新，纯JS实现的省市区三级联动。

当省市区数据变动是只需调正js即可。

使用方法：

 1 < !DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>纯JS省市区联动</title>
 5 <script type="text/javascript" src="jsAddress.js"></script>
 6 </head>
 7 <body>
 8 <div>
 9 省：<select id="cmbProvince"></select>
10 市：<select id="cmbCity"></select>
11 区：<select id="cmbArea"></select>
12 <br /><br />
13 省：<select id="Select1"></select>
14 市：<select id="Select2"></select>
15 区：<select id="Select3"></select>
16 <script type="text/javascript">
17 addressInit('cmbProvince', 'cmbCity', 'cmbArea', '陕西', '宝鸡市', '金台区');
18 addressInit('Select1', 'Select2', 'Select3');
19 </script>
20 </div>
21 </body>
22 </html>
 1 var addressInit = function(_cmbProvince, _cmbCity, _cmbArea, defaultProvince, defaultCity, defaultArea)
 2 {
 3 var cmbProvince = document.getElementById(_cmbProvince);
 4 var cmbCity = document.getElementById(_cmbCity);
 5 var cmbArea = document.getElementById(_cmbArea);
 6 
 7 function cmbSelect(cmb, str)
 8 {
 9 for(var i=0; i<cmb.options.length; i++)
10 {
11 if(cmb.options[i].value == str)
12 {
13 cmb.selectedIndex = i;
14 return;
15 }
16 }
17 }
18 function cmbAddOption(cmb, str, obj)
19 {
20 var option = document.createElement("OPTION");
21 cmb.options.add(option);
22 option.innerHTML = str;
23 option.value = str;
24 option.obj = obj;
25 }
26 
27 function changeCity()
28 {
29 cmbArea.options.length = 0;
30 if(cmbCity.selectedIndex == -1)return;
31 var item = cmbCity.options[cmbCity.selectedIndex].obj;
32 for(var i=0; i<item.areaList.length; i++)
33 {
34 cmbAddOption(cmbArea, item.areaList[i], null);
35 }
36 cmbSelect(cmbArea, defaultArea);
37 }
38 function changeProvince()
39 {
40 cmbCity.options.length = 0;
41 cmbCity.onchange = null;
42 if(cmbProvince.selectedIndex == -1)return;
43 var item = cmbProvince.options[cmbProvince.selectedIndex].obj;
44 for(var i=0; i<item.cityList.length; i++)
45 {
46 cmbAddOption(cmbCity, item.cityList[i].name, item.cityList[i]);
47 }
48 cmbSelect(cmbCity, defaultCity);
49 changeCity();
50 cmbCity.onchange = changeCity;
51 }
52 
53 for(var i=0; i<provinceList.length; i++)
54 {
55 cmbAddOption(cmbProvince, provinceList[i].name, provinceList[i]);
56 }
57 cmbSelect(cmbProvince, defaultProvince);
58 changeProvince();
59 cmbProvince.onchange = changeProvince;
60 }
61 
62 var provinceList = [
63 {name:'北京', cityList:[
64 {name:'市辖区', areaList:['东城区','西城区','崇文区','宣武区','朝阳区','丰台区','石景山区','海淀区','门头沟区','房山区','通州区','顺义区','昌平区','大兴区','怀柔区','平谷区']},
65 {name:'县', areaList:['密云县','延庆县']}
66 ]},
67 {name:'上海', cityList:[
68 {name:'市辖区', areaList:['黄浦区','卢湾区','徐汇区','长宁区','静安区','普陀区','闸北区','虹口区','杨浦区','闵行区','宝山区','金山区','松江区','青浦区','南汇区','奉贤区']},
69 {name:'县', areaList:['崇明县']}
70 ]}
71 ];

 

posted on 2014-11-10 15:40  林中侠客  阅读(168)  评论(0)    收藏  举报