文档章节

二级联动,三级联动,初学者,纯javascript,不含jQuery

o
 osc_y8yehimr
发布于 2019/03/20 15:58
字数 420
阅读 7
收藏 0

二级联动:

html代码:

 1 <body>
 2         <select id="province" onchange="getCity(this.options.selectedIndex)">
 3             <option>请选择</option>
 4             <option>广东</option>
 5             <option>广西</option>
 6         </select>&nbsp;
 7         <select id="city">
 8             <option>请选择</option>
 9         </select>&nbsp;
10 </body>

js代码:

 1 var citys=[
 2     ["广州","佛山","深圳"],
 3    ["柳州","桂林"]
 4 ];
 5 function getCity(index){
 6      var city=document.getElementById('city');
 7      var showCity=citys[index-1];
 8      city.length=1;
 9      for(var i=0;i<showCity.length;i++){
10           city.options[i+1]=new Option(showCity[i]);
11      }
12 }

三级联动:

html代码:

 1 <body>
 2         <select id="province" onchange="getCity()">
 3             <option>请选择</option>
 4             <option>广东</option>
 5             <option>广西</option>
 6         </select>&nbsp;
 7         <select id="city" onchange="getArea()">
 8             <option>请选择</option>
 9         </select>&nbsp;
10         <select id="area">
11             <option>请选择</option>
12         </select>13     </body>

js代码:

 1 var city = [
 2                 ["广州", "朝阳", "潮州", "汕头"],
 3                 ["柳州", "桂林"]
 4             ];
 5             var areaa = [
 6                 [
 7                     ["花都", "越秀", "荔湾", "天河", "海珠", "增城", "从化"],
 8                     ["双塔", "龙城"],
 9                     ["湘桥", "潮安"],
10                     ["龙湖", "濠江", "朝南", "澄海"]
11                 ],
12                 [
13                     ["柳江", "柳南", "柳北"],
14                     ["叠彩", "秀峰", "七星", "雁山", "临桂"]
15                 ]
16             ];
17 
18             function getCity() {
19                 var prov = document.getElementById("province");
20                 var ci = document.getElementById("city");
21                 var ar = document.getElementById('area');
22                 var provinceCity = city[prov.selectedIndex - 1];
23                 ci.length = 1; //为了处理数组切换时数据错乱
24                 if(prov.selectedIndex != 0) {
25                     for(var i = 0; i < provinceCity.length; i++) {
26                         ci[i + 1] = new Option(provinceCity[i]);
27                         //以下写法也可以
28                         //ci.options[i+1]=new Option(provinceCity[i]);
29                     }
30                 }
31                 ar.length = 1;
32             }
33 
34             function getArea() {
35                 var prov = document.getElementById("province");
36                 var ar = document.getElementById('area');
37                 var ci = document.getElementById("city");
38                 var provinceCityArea = areaa[prov.selectedIndex - 1][ci.selectedIndex - 1];
39                 ar.length = 1; //为了处理数组切换时数据错乱
40                 if(ci.selectedIndex != 0) {
41                     for(var i = 0; i < provinceCityArea.length; i++) {
42                         ar[i + 1] = new Option(provinceCityArea[i]);
43                     }
44                 }
45 
46             }

 

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

暂无文章

git 为项目设置用户名/邮箱/密码

1.找到项目所在目录下的 .git,进入.git文件夹,然后执行如下命令分别设置用户名和邮箱 git config user.name "Affandi" git config user.email "123333333@qq.com" 然后执行命令查看con......

有时很滑稽
31分钟前
0
0
如何从int转换为String? - How do I convert from int to String?

问题: I'm working on a project where all conversions from int to String are done like this: 我正在一个项目中,所有从int到String转换都是这样完成的: int i = 5;String strI = "" ......

javail
42分钟前
10
0
Vue+Spring Data JPA+MySQL 增查改删

视频讲解: https://www.bilibili.com/video/BV16i4y1G7i2/ 工程概述: 前后端分离,进行简单增查改删(CRUD) 前端使用VUE 后端使用Spring Data JPA 数据库使用MySQL #EmployeeController.jav...

潘文海
58分钟前
13
0
我花了一个星期,做出了公司的管理系统,只需几个步骤!

我是企业的管理人员,公司发展到现阶段,感觉进入到了瓶颈期,每个员工的工作都已经饱和,很难再挤出时间做其它的事情,需要一款合适的管理软件来协作我们的工作。本来打算买一套管理软件就行...

科技那些事儿
今天
19
0
如何从Android应用程序获取崩溃数据? - How do I obtain crash-data from my Android application?

问题: How can I get crash data (stack traces at least) from my Android application? 如何从我的Android应用程序获取崩溃数据(至少是堆栈跟踪)? At least when working on my own de......

技术盛宴
今天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部