前幾天在看js的相關內容，所以就簡單寫了一個二級聯動菜單。分享一下。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS實現二級聯動菜單</title> 6 </head> 7 <body> 8 <form name="form1" method="post" action=""> 9 省份：<select name="province" id="province" onchange="changeSelect(this.selectedIndex)"></select> 10 地區：<select name="city" id="city"></select> 11 12 </form> 13 </body> 14 </html> 15 <script type="text/javascript"> 16 var arr_province = ["請選擇省/城市","北京市","上海市","天津市","重慶市","深圳市","廣東省"]; 17 var arr_city = [ 18 ["請選擇城市/地區"], 19 ["東城區","西城區","朝陽區","宣武區","昌平區","大興區","豐台區","海淀區"], 20 ['寶山區','長寧區','豐賢區', '虹口區','黃浦區','青浦區','南匯區','徐匯區','盧灣區'], 21 ['和平區', '河西區', '南開區', '河北區', '河東區', '紅橋區', '塘古區', '開發區'], 22 ['俞中區', '南岸區', '江北區', '沙坪壩區', '九龍坡區', '渝北區', '大渡口區', '北碚區'], 23 ['福田區', '羅湖區', '鹽田區', '寶安區', '龍崗區', '南山區', '深圳周邊'], 24 ['廣州市','惠州市','汕頭市','珠海市','佛山市','中山市','東莞市'] 25 ]; 26 //網頁加載完成，初始化菜單 27 window.onload = init;//傳入函數地址 28 function init(){ 29 //首先獲取對象 30 var province = document.form1.province; 31 var city = document.form1.city; 32 33 //指定省份中<option>標記的個數 34 province.length = arr_province.length; 35 36 //循環將數組中的數據寫入<option>標記中 37 for(var i=0;i<arr_province.length;i++){ 38 province.options[i].text = arr_province[i]; 39 province.options[i].value = arr_province[i]; 40 } 41 42 //修改省份列表的默認選擇項 43 var index = 0; 44 province.selectedIndex = index; 45 46 //指定城市中<option>標記的個數 47 city.length = arr_city[index].length; 48 49 //循環將數組中的數據寫入<option>標記中 50 for (var j = 0; j<arr_city[index].length;j++) { 51 city.options[j].text = arr_city[index][j]; 52 city.options[j].value = arr_city[index][j]; 53 } 54 55 } 56 57 function changeSelect(index){ 58 //選擇對象 59 var city = document.form1.city; 60 //修改省份列表的選擇項 61 province.selectedIndex = index; 62 63 //指定城市中<option>標記的個數 64 city.length = arr_city[index].length; 65 66 //循環將數組中的數據寫入<option>標記中 67 for (var j = 0; j<arr_city[index].length;j++) { 68 city.options[j].text = arr_city[index][j]; 69 city.options[j].value = arr_city[index][j]; 70 } 71 } 72 73 </script>