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

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

程序员文章站 2022-06-26 10:15:10
二级联动： html代码： js代码： 三级联动： html代码： js代码： ......

二级联动：

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             }

 

上一篇： 一款利用纯css3实现的360度翻转按钮的实例教程

下一篇： 实例教程 一款纯css3实现的数字统计游戏

推荐阅读