指引网

当前位置: 主页 > 网页制作 > JavaScript >

js实现的二级联动

来源:网络 作者:佚名 点击: 时间:2017-08-07 22:17
[摘要] js实现的二级联动,指引教程网推荐下载!站长必备的js网页特效及js广告代码,提供高质量js特效下载。<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0...
js实现的二级联动,指引教程网推荐下载!站长必备的js网页特效及js广告代码,提供高质量js特效下载。
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <meta name="Generator" content="EditPlus">  
  6.   <meta name="Author" content="">  
  7.   <meta name="Keywords" content="">  
  8.   <meta name="Description" content="">  
  9.  </head>  
  10.  
  11.  <body>  
  12.   <select id="liandong1" onchange="change1(this.options.selectedIndex)" />  
  13.   <option>北方城市</option>  
  14.   <option>南方城市</option>  
  15.   </select>  
  16.   <select id="liandong2">  
  17.   <option>请选择</option>  
  18.   <option>东北</option>  
  19.   <option>西北</option>  
  20.   </select>  
  21.  
  22.   <script type="text/javascript">  
  23.   <!--  
  24.     var groups=document.getElementById('liandong1').options.length;  
  25.     var group=new Array(groups);  
  26.     for (var i=0;i<groups;i++){  
  27.     group[i] = new Array();  
  28.     }  
  29.     group[0][0]="请选择";  
  30.     group[0][1]="东北";  
  31.     group[0][2]="西北";  
  32.  
  33.     group[1][0]="请选择";  
  34.     group[1][1]="东南";  
  35.     group[1][2]="西南";  
  36.     group[1][3]="中原";  
  37.    
  38.     var temp=document.getElementById("liandong2");  
  39.     function change1(x){  
  40.     for(var i=0; i < temp.options.length;i++){  
  41.     temp.options.remove(i);  
  42.     }  
  43.     for(i=0; i < group[x].length; i++){  
  44.     temp.options[i]=new Option(group[x][i],"");  
  45.     }  
  46.  
  47.     }  
  48.  
  49.   //-->  
  50.   </script>  
  51.  </body>  
  52. </html>  

 

------分隔线----------------------------