省市县级联

JS:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta charset="utf-8">
 6 </head>
 7 <body>
 8 <select>
 9     <option>---请选择省---</option>
10 </select>
11 <select>
12     <option>---请选择市---</option>
13 </select>
14 <select>
15     <option>请选择县</option>
16 </select>
17 
18 <script type="text/javascript">
19     var proArr = ["安徽","河南","河北","江苏"];
20     var cityArr = [
21         ["合肥","蚌埠","亳州","阜阳"],
22         ["郑州","开封","商丘","焦作"],
23         ["石家庄","邯郸","衡水"],
24         ["苏州","杭州","无锡","南京"]
25     ]
26     var couArr = [
27         [
28             ["合县1","合县2","合县3","合县4"],
29             ["蚌县1","蚌县2","蚌县3","蚌县4"],
30             ["亳县1","亳县2","亳县3","亳县4"],
31             ["阜县1","阜县2","阜县3","阜县4"],
32         ],
33         [
34             ["郑县1","郑县2","郑县3","郑县4"],
35             ["开县1","开县2","开县3","开县4"],
36             ["商县1","商县2","商县3","商县4"],
37             ["焦县1","焦县2","焦县3","焦县4"],
38         ],
39         [
40             ["石县1","石县2","石县3","石县4"],
41             ["邯县1","邯县2","邯县3","邯县4"],
42             ["衡县1","衡县2","衡县3","衡县4"],
43         ],
44         [
45             ["苏县1","苏县2","苏县3","苏县4"],
46             ["杭县1","杭县2","杭县3","杭县4"],
47             ["无县1","无县2","无县3","无县4"],
48             ["南县1","南县2","南县3","南县4"],
49         ],
50     ]
51     var sltNope = document.getElementsByTagName("select");
52     var Index1 = 0;
53     createNope(proArr,0);
54     sltNope[0].onchange = function(){
55         sltNope[1].length = 1;
56         sltNope[2].length = 1;
57         Index = this.selectedIndex-1;
58         createNope(cityArr[Index],1);
59     }
60     sltNope[1].onchange = function(){
61         sltNope[2].length = 1;
62         createNope(couArr[Index][this.selectedIndex-1],2);
63     }    
64     function createNope(Arr,sum){
65         for (x = 0;x<Arr.length;x++) {
66             var topy = document.createElement('option');
67             topy.innerHTML = Arr[x];
68             sltNope[sum].appendChild(topy);
69         }
70     }
71 </script>
72 </body>
73 </html>

JQ:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta charset="utf-8">
 6     <script type="text/javascript" src="jquery-3.1.1.js"></script>
 7 </head>
 8 <body>
 9 <select>
10     <option>---请选择省---</option>
11 </select>
12 <select>
13     <option>---请选择市---</option>
14 </select>
15 <select>
16     <option>请选择县</option>
17 </select>
18 
19 <script type="text/javascript">
20     var proArr = ["安徽","河南","河北","江苏"];
21     var cityArr = [
22         ["合肥","蚌埠","亳州","阜阳"],
23         ["郑州","开封","商丘","焦作"],
24         ["石家庄","邯郸","衡水"],
25         ["苏州","杭州","无锡","南京"]
26     ]
27     var couArr = [
28         [
29             ["合县1","合县2","合县3","合县4"],
30             ["蚌县1","蚌县2","蚌县3","蚌县4"],
31             ["亳县1","亳县2","亳县3","亳县4"],
32             ["阜县1","阜县2","阜县3","阜县4"],
33         ],
34         [
35             ["郑县1","郑县2","郑县3","郑县4"],
36             ["开县1","开县2","开县3","开县4"],
37             ["商县1","商县2","商县3","商县4"],
38             ["焦县1","焦县2","焦县3","焦县4"],
39         ],
40         [
41             ["石县1","石县2","石县3","石县4"],
42             ["邯县1","邯县2","邯县3","邯县4"],
43             ["衡县1","衡县2","衡县3","衡县4"],
44         ],
45         [
46             ["苏县1","苏县2","苏县3","苏县4"],
47             ["杭县1","杭县2","杭县3","杭县4"],
48             ["无县1","无县2","无县3","无县4"],
49             ["南县1","南县2","南县3","南县4"],
50         ],
51     ]
52     createNope(proArr,0);
53     $("select")[0].onchange = function(){
54         $("select")[1].length = 1;
55         $("select")[2].length = 1;
56         Index = this.selectedIndex-1;
57         createNope(cityArr[Index],1);
58     }
59     $("select")[1].onchange = function(){
60         $("select")[2].length = 1;
61         createNope(couArr[Index][this.selectedIndex-1],2);
62     }
63     function createNope(Arr,sum){
64         $.each(Arr,function(index,value){
65             $("select").eq(sum).append("<option>"+value+"</option>");
66         })
67     }
68 </script>
69 </body>
70 </html>

猜你喜欢