下拉列表 级联菜单操作(js代码的级联操作)

来源:互联网 发布:chalea高清网络电视 编辑:程序博客网 时间:2024/06/05 01:04
  1. <script type="text/javascript">  
  2.     function selcity(){  
  3.         var arr = [["--选择城市--"],["海定区","东城区","西城区","朝阳区"],["济南","青岛","日照","威海"],  
  4.                    ["长沙","郴州","岳阳","株洲"],["广州","深圳","惠州","东莞"]];  
  5.         var index = document.getElementById("selID").selectedIndex;  
  6.         var subNode = document.getElementById("subID");  
  7.         var citys = arr[index];        
  8.           
  9.         subNode.options.length = 0;   //清空之前选项  
  10.         for(var x=0;x<citys.length;x++){  
  11.             var optNode = document.createElement("option");  
  12.             optNode.innerText = citys[x];  
  13.             subNode.appendChild(optNode);  //选择添加到子选项中  
  14.         }  
  15.     }  
  16. </script>  
  17. <style type="text/css">   
  18.       
  19. </style>  
  20. </head>  
  21. <body>  
  22.     <select id="selID" onchange="selcity()">  
  23.         <option>--选择省市--</option>  
  24.         <option>北京</option>  
  25.         <option>山东</option>  
  26.         <option>湖南</option>  
  27.         <option>广东</option>  
  28.     </select>  
  29.       
  30.     <select id="subID">  
  31.         <option>--选择城市--</option>  
  32.     </select>  
  33. </body> 
原创粉丝点击