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

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

程序员文章站 2022-03-13 09:18:48
二级联动： 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             }

 

上一篇： spring的基于java的项目配置示例1

下一篇： bitset中_Find_first()与_Find_next()函数

推荐阅读