首页/技術動態

js給select二級聯動，js實戰之-聯動下拉菜單

 2023-12-07 阅读 30 评论 0

摘要：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

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>

js給select二級聯動？?

轉載于:https://www.cnblogs.com/chaoming/p/3183570.html

版权声明：本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接：https://hbdhgg.com/4/192939.html

上一篇：偏最小二乘建模的思想與步驟，POJ 3084 Panic Room (最小割建模)
下一篇：頭痛最好的緩解方法，頭疼
标签：js給select二級聯動二級下拉菜單自動聯動js動態生成下拉列表js二級下拉菜單代碼jquery下拉框二級聯動jquery實現下拉菜單js表格增加一行js樹形結構
js給select二級聯動

发表评论:

最新文章
阅读排行
猜你喜欢
热门标签

本站为非赢利网站，部分文章来源或改编自互联网及其他公众平台，主要目的在于分享信息，版权归原作者所有，内容仅供读者参考，如有侵权请联系我们删除！

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息