省份城市二级联动 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>省级联动</title>
 6         <script type="text/javascript">
 7             var cities=new Array(3);
 8             cities[0]=new Array("武汉市","黄冈市","襄阳市","荆州市");
 9             cities[1]=new Array("长沙市","郴州市","株洲市","岳阳市");
10             cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
11             cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
12             
13             function changeCity(val){
14                 //h获取第二个下拉列表
15                 var cityEle=document.getElementById("city");
16                 //清空第二个option中的内容
17                 cityEle.options.length=0;
18                 
19                 for(var i=0;i<cities.length;i++){
20                     if(val==i){
21                         for(var j=0;j<cities[i].length;j++){
22                             //创建城市的文本节点
23                             var textNode=document.createTextNode(cities[i][j])
24                             //创建option元素节点
25                             var opEle=document.createElement("option");
26                             //把城市的文本节点放到option上
27                             opEle.appendChild(textNode);
28                             //把option元素的节点放到第二个下拉列表中
29                             cityEle.appendChild(opEle);
30                         }
31                     }
32                 }
33             }
34         </script>
35     </head>
36     <body>
37         <lable>籍贯</lable>
38        <select onchange="changeCity(this.value)">
39            <option value="0">湖北</option>
40            <option value="1">湖南</option>
41            <option value="2">河北</option>
42            <option value="3">河南</option>
43        </select>
44        <select id="city">
45            
46        </select>
47     </body>
48 </html>

实现效果：

 

 

posted @ 2018-06-26 23:34  yanlong_step  阅读(239)  评论(0)    收藏  举报