文档章节

省市县级联

o
 osc_4nmshwhm
发布于 2018/08/06 22:28
字数 811
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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>

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

如何删除使用Python的easy_install安装的软件包? - How do I remove packages installed with Python's easy_install?

问题: Python's easy_install makes installing new packages extremely convenient. Python的easy_install使安装新包非常方便。 However, as far as I can tell, it doesn't implement th......

fyin1314
22分钟前
8
0
如何将逗号分隔的字符串转换为数组? - How to convert a comma separated string to an array?

问题: I have a comma separated string that I want to convert into an array, so I can loop through it. 我有一个逗号分隔的字符串,我想将其转换成数组,因此可以循环遍历它。 Is the...

富含淀粉
52分钟前
13
0
深源恒际:担心个人身份被冒用?不存在!

本文作者:c****t 近日,苟晶被冒名顶替身份参加高考的事件在社会各界掀起广泛热议。事件调查结果公布后,舆论风向逆转,吃瓜群众认为当事人夸大其词消费了公众情绪,一边对当事人所遭遇的不...

百度开发者中心
昨天
5
0
CKEditor 5 + SpringBoot实战(三):SpringData JPA数据持久化

在本系列的文章中,我将介绍如何在Spring Boot Application中使用CKEditor编辑器。介绍的内容包括基本环境的搭建,文件上传,SpringData JPA数据持久化,CKEditor5的安装,CKEditor图片上传,...

树下魅狐
今天
9
0
Confluence 如何查看页面 ID

如果你希望查看页面的 ID 你有 2 个方法。 例如,你希望查看 https://www.cwiki.us/display/CONFLUENCEWIKI/Get+started 页面的 Page ID 的话。 如果你的标题栏没有特殊字符,那么将会使用英...

honeymoose
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部