省市区三级联动

省市区三级联动html：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <select id="province">
 9             <option >请选择省</option>
10             <option value="河南省">河南省</option>
11             <option value="湖北省">湖北省</option>
12             <option value="广东省">广东省</option>
13         </select>
14         <select id="city">
15             <option >请选择市</option>
16         </select>
17         <select id="county">
18             <option >请选择县</option>
19         </select>
20     </body>
21 </html>
22 <script>
23     var arr=new Array();
24        arr["河南省"]=["驻马店","郑州","洛阳"];
25                arr["驻马店"]=["驿城区","汝南县","平舆县"];
26                arr["郑州"]=["中原区","新郑区","金水区"];
27                arr["洛阳"]=["洛龙区","涧河区","汝阳县"];
28        
29        arr["湖北省"]=['武汉','襄阳','宜昌'];
30                arr["武汉"]=["武昌区","江汉区","汉阳区"];
31                arr["襄阳"]=["樊城区","襄城区","襄州区"];
32                arr["宜昌"]=["夷陵区","琥亭区","秭归县"];
33        
34        arr["广东省"]=["广州","深圳","惠州"];
35                arr["广州"]=["天河区","越秀区","珠江新城"];
36                arr["深圳"]=["宝安区","南山区","龙岗区"];
37                arr["惠州"]=["惠阳区","惠东县","惠阳经济开发区"];
38                
39            //一级
40        document.querySelector("#province").onchange=function(){
41               var index=this.value;//获取索引
42               document.querySelector("#city").length=1;
43               document.querySelector("#county").length=1;
44               var op;//声明option标签
45               for(var item of arr[index]){
46                       op=new Option(item);//创建option标签
47                       console.log(op)
48                       document.querySelector("#city").add(op);
49               }
50               
51        }
52            //二级
53        document.querySelector("#city").onchange=function(){
54               var index=this.value;//获取索引
55               document.querySelector("#county").length=1;
56               var op;//声明option标签
57               for(var item of arr[index]){
58                       op=new Option(item);//创建option标签
59                       console.log(op)
60                       document.querySelector("#county").add(op);
61               }
62               
63        }
64 </script>
ProvincialAndMunicipalCounty.html

 

posted on 2018-04-14 19:45  longlinji  阅读(162)  评论(0)    收藏  举报