省市县级联
程序员文章站
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>