js 级联菜单

源码:http://yuncode.net/code/c_5051c06d80ad295

 

 

 

 

 

  
  
  
  
  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. <title>js 级联菜单</title>  
  5. <style type="text/css">  
  6. #Select2 {  
  7.     width: 120px;  
  8. }  
  9. #Select1 {  
  10.     width: 100px;  
  11. }  
  12. </style>  
  13. <script type="text/javascript" language="javascript">  
  14.     var arr = new Array([ "河南省""1""开封市""南阳市""安阳市""郑州市" ], [ "山东省",  
  15.             "2""济南市""日照市""潍坊市""菏泽市" ],  
  16.             [ "广东省""3""广州市""珠海市""深圳" ], [ "吉林省""4""大连市""沈阳市",  
  17.                     "哈尔滨市""冰城" ]);  
  18.     function shengshi() {  
  19.         for ( var i = 0; i < arr.length; i++) {  
  20.             document.getElementById("Select2").options.add(new Option(  
  21.                     arr[i][0], arr[i][1]))  
  22.         }  
  23.         ;  
  24.     }  
  25.     function getCity() {  
  26.         document.getElementById("Select1").options.length = 1;  
  27.         var k = document.getElementById("Select2").value - 1;  
  28.         for ( var j = 2; j < arr[k].length; j++) {  
  29.             document.getElementById("Select1").options.add(new Option(  
  30.                     arr[k][j], arr[k][j]))  
  31.         }  
  32.     }  
  33. </script>  
  34. </head>  
  35. <body onload="shengshi()">  
  36. <p>所在省:  
  37.   <select id="Select2" name="D2" onchange="getCity()">  
  38.     <option></option>  
  39.   </select>  
  40.   所在市:  
  41.   <select id="Select1" name="D1">  
  42.     <option></option>  
  43.   </select>  
  44. </p>  
  45. </body>  
  46. </html> 

 

你可能感兴趣的:(js,级联,菜单)