js实战之-联动下拉菜单

最新推荐文章于 2024-03-19 04:01:02 发布

weixin_30415801

最新推荐文章于 2024-03-19 04:01:02 发布

阅读量76

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/chaoming/p/3183570.html

版权

1.二级联动

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <html>
 3 <head>
 4 <title>js-联动菜单 </title>
 5 <script language="JavaScript" type="text/javascript">
 6 
 7 var city=[
 8  ["北京","天津","上海","重庆"],
 9  ["南京","苏州","南通","常州"],
10  ["福州","福安","龙岩","南平"],
11  ["广州","潮阳","潮州","澄海"],
12  ["兰州","白银","定西","敦煌","香港","澳门"]
13  ];
14 function getCity(){
15  var sltProvince=document.getElementById("province");
16  var sltCity=document.getElementById("city");
17  var provinceCity=city[sltProvince.selectedIndex-1];
18  sltCity.length=1;
19  for(var i=0;i<provinceCity.length;i++){
20  sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
21  }
22 }
23 
24  </script>
25  </head>
26  <body>
27 
28  
29  <select name="province" id="province" onchange="getCity()">
30   <option value="0">请选择所在省份</option>
31   <option value="直辖市">直辖市</option>
32   <option value="江苏省">江苏省</option>
33   <option value="福建省">福建省</option>
34   <option value="广东省">广东省</option>
35   <option value="甘肃省">甘肃省</option>
36  </select>
37  <select id="city" name="city">
38   <option value="0">请选择所在城市</option>
39  </select>
40 
41  </body>
42  </html>

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>无标题文档</title>
 6 </head>
 7 
 8 <body>
 9 <select name="select" id="shengfen" onchange="changecity(this.options[this.selectedIndex].value)">
10 <option >--请选择省份--</option>
11 </select>
12 <select name="city" id="city">
13  <option >--请选择城市--</option>
14 </select>
15 
16 <script language="javascript">
17 var sfname=["河北省","山东省","河南省","广东省"];
18 var city=new Array();
19 city[0]="邯郸|保定|邢台|承德|廊坊|石家庄";
20 city[1]="青岛|大连|淄博|泰山";
21 city[2]="商丘|永成|洛阳|郑州";
22 city[3]="广州|深圳|东莞|厦门";
23 
24 var sf_box=document.getElementById("shengfen");
25 function  liandong(){
26 for(var i=0;i<sfname.length;i++){
27   sf_box.options[i+1]=new Option(sfname[i],i);
28   }
29 }
30 liandong();
31 function   changecity(xzcity){
32     var city_box=document.getElementById("city");
33     city_box.length=1;
34     for(var i=0;i<sfname.length;i++){
35         if(i==xzcity){
36             var cityx=city[xzcity].split("|");
37             for(var j=0;j<cityx.length;j++){                
38               city_box.options[j+1]=new Option(cityx[j],cityx[j])
39                  }
40             }
41         }    
42     }
43 </script>
44 
45 </body>
46 </html>

2.多级联动

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <script>
  7 window.onload = function(){
  8     var s1 = new Sel('div1');
  9     
 10     s1.add('0' , ['1' , '2' , '3']);
 11     s1.add('0_0' , ['1_1' , '1_2' , '1_3']);
 12     s1.add('0_0_0' , ['1_1_1' , '1_1_2' , '1_1_3']);
 13     s1.add('0_0_1' , ['1_2_1' , '1_2_2' , '1_2_3']);
 14     s1.add('0_0_2' , ['1_3_1' , '1_3_2' , '1_3_3']);    
 15     s1.add('0_1' , ['2_1' , '2_2' , '2_3']);
 16     s1.add('0_1_0' , ['2_1_1' , '2_1_2' , '2_1_3']);
 17     s1.add('0_1_1' , ['2_2_1' , '2_2_2' , '2_2_3']);
 18     s1.add('0_1_2' , ['2_3_1' , '2_3_2' , '2_3_3']);
 19     s1.add('0_2' , ['3_1' , '3_2' , '3_3']);
 20     s1.add('0_2_0' , ['3_1_1' , '3_1_2' , '3_1_3']);
 21     s1.add('0_2_1' , ['3_2_1' , '3_2_2' , '3_2_3']);
 22     s1.add('0_2_2' , ['3_3_1' , '3_3_2' , '3_3_3']);
 23     
 24     s1.init(3);
 25         
 26 };
 27 
 28 function Sel(id){
 29     this.oParent = document.getElementById(id);
 30     this.data = {};
 31     this.aSel = this.oParent.getElementsByTagName('select');
 32 }
 33 
 34 Sel.prototype = {
 35     
 36     init : function(num){
 37         
 38         var This = this;
 39         
 40         for(var i=1;i<=num;i++){
 41             var oSel = document.createElement('select');
 42             var oPt = document.createElement('option');
 43             oPt.innerHTML = '默认';
 44             oSel.appendChild(oPt);
 45             oSel.index = i;
 46             this.oParent.appendChild(oSel);
 47             
 48             oSel.onchange = function(){
 49                 This.change( this.index );
 50             };
 51             
 52         }
 53         
 54         this.first();
 55         
 56     },
 57     add : function(key,value){
 58         this.data[key] = value;
 59     },
 60     first : function(){
 61         var arr = this.data['0'];
 62         
 63         for(var i=0;i<arr.length;i++){
 64             var oPt = document.createElement('option');
 65             oPt.innerHTML = arr[i];
 66             this.aSel[0].appendChild(oPt);
 67         }
 68         
 69     },
 70     change : function( iNow ){
 71         
 72         var str = '0';
 73         
 74         for(var i=0;i<iNow;i++){
 75             str += '_' + ( this.aSel[i].selectedIndex - 1 );
 76         }
 77         
 78         if( this.data[str] ){
 79             
 80             var arr = this.data[str];
 81             
 82             this.aSel[iNow].options.length = 1;
 83             
 84             for(var i=0;i<arr.length;i++){
 85                 var oPt = document.createElement('option');
 86                 oPt.innerHTML = arr[i];
 87                 this.aSel[iNow].appendChild(oPt);
 88             }
 89             
 90             this.aSel[iNow].options[1].selected = true;
 91             
 92             
 93             iNow++;
 94             
 95             if(iNow < this.aSel.length){
 96                 this.change(iNow);
 97             }
 98             
 99         }
100         else{
101             
102             if(iNow < this.aSel.length){
103                 this.aSel[iNow].options.length = 1;
104             }
105             
106         }
107         
108     }
109     
110 };
111 
112 </script>
113 </head>
114 
115 <body>
116 <div id="div1"></div>
117 </body>
118 </html>

转载于:https://www.cnblogs.com/chaoming/p/3183570.html

weixin_30415801

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实战之-联动下拉菜单

1.二级联动 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <html> 3 <head> 4 <title>js-联动菜单 </title> 5 <script language="JavaScript" type="t...
复制链接

扫一扫