欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

省市县级联

程序员文章站 2022-03-29 18:49:34
JS: JQ: ......

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>