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

 

 

js 级联菜单_级联 

 

 

  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>