省市联动 简化版

 

我改简化版：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8" />
 6         <title></title>
 7     </head>
 8     <script type="text/javascript" src="js/jquery-1.8.0.js" ></script>
 9 
10     <body>
11         <!--<SELECT name="sheng" onchange="set_city(this, document.getElementById('city'));">-->
12         <SELECT name="sheng" onchange="set_city2(this, $('#city')[0]);"><!--这里注意：如果用jq的方法，要记得转换为js对象（加上[0]）-->
13             <!--主选项可以写死，注意第一个选项是默认显示的选项，要和从选项中的第一个数组顺序对应-->
14             <option value=北京>北京</option>
15             <option value=台湾>台湾</option>
16             <option value=河北省>河北省</option>
17         
18         </SELECT> - 市
19         
20         <select id="city"  name="shi">
21             <!--因为主选项第一个是北京，所以，从选项给个默认值，就是北京对应的所有子选项，这里只有一个，所以只写上一个北京-->
22             <option value=北京>北京</option>
23 
24         </select>
25     </body>
26 
27 </html>
28 
29 <script language=javascript>
30     //定义一个对象，用来存储省市的对应关系和市列表。【键是省，值是对应的市对象数组】
31     cities = {};
32 
33     cities['北京'] = ['北京'];
34     
35     cities['台湾'] = ['台北', '台南', '其他'];
36     
37     cities['河北省'] = new Array('石家庄', '张家口', '承德', '秦皇岛', '唐山', '廊坊', '保定', '沧州', '衡水', '邢台', '邯郸');
38 
39 /*要特别注意的是：下面这个方法中的两个参数 都是原生js的Dom对象，并不是jq的对象*/
40     
41     ///下面是简写版（没有第一个默认的空选项：请选择）
42     function set_city2(province, city)
43     {
44         var pv = province.value; //获取主选项的选中值
45         
46         city.length = 0;  //这个一定要加上，否则多点几次后会出现上次的多余子选项。【值为0或者1都行】
47         
48         for(var i = 0; i < cities[pv].length; i++) //遍历对应子选项的值
49         {
50             city.options[i] = new Option(); //用原生js创建一个option标签对象，并添加到city元素【主select标签的js对象】中
51 
52             city.options[i].text = cities[pv][i]; //设置 <option>标签的text文本显示值
53 
54             city.options[i].value = cities[pv][i]; //设置 <option>标签的value值,以便select提交时的val()用
55 
56         }
57 
58     }
59     
60     
61     
62     /*下面这个是复杂版，供对照参考，详情请看另一篇相似文章*/
63         function set_city(province, city)
64     {
65         var pv, cv;
66 
67         var i, ii;
68 
69         pv = province.value;
70 
71         cv = city.value;
72 
73         city.length = 1;
74 
75         if(pv == '0') return;
76 
77         if(typeof(cities[pv]) == 'undefined') return;
78 
79         for(i = 0; i < cities[pv].length; i++)
80         {
81 
82             ii = i + 1;
83 
84             city.options[ii] = new Option();
85 
86             city.options[ii].text = cities[pv][i];
87 
88             city.options[ii].value = cities[pv][i];
89 
90         }
91 
92     }
93 </script>

 

posted @ 2017-08-17 16:02  戈博折刀  阅读(96)  评论(0)    收藏  举报