本文實例講述了JS二級菜單。分享給大家供大家參考
1<head>
2 <meta charset="utf-8" />
3 <title></title>
4</head>
5
6<body>
7 省/市:
8 <select id="provice"></select>
9 市/區:
10 <select id="city"></select>
11 <script type="text/javascript">
12 //定義省/直轄市數組
13 var arr_province = ["請選擇省/直轄市", "北京市", "上海市", "廣東省"];
14 //定義市/區二維數組
15 var arr_city = [
16 ["請選擇市/區"],
17 ["東城區", "西城區", "朝陽區", "宣武區", "昌平區", "大興區", "丰台區", "海淀區"],
18 ['寶山區', '長寧區', '豐賢區', '虹口區', '黃浦區', '青浦區', '南匯區', '徐匯區', '盧灣區'],
19 ['廣州市', '惠州市', '汕頭市', '珠海市', '佛山市', '中山市', '東莞市']
20 ];
21 var province=document.getElementById("provice");
22 var city=document.getElementById("city");
23 //初始化菜單
24 window.onload=function(){
25 province.length=arr_province.length;
26 for (var i=0;i<arr_province.length;i++) {
27 province.options[i].text=arr_province[i];
28 }
29 city.length=1;
30 city.options[0].text=arr_city[0][0];
31 }
32 //二級連動
33 province.onchange=function(){
34 var index=province.selectedIndex;
35 city.length=arr_city[index].length;
36 for (var i=0;i<city.length;i++) {
37 city.options[i].text=arr_city[index][i];
38 }
39 }
40 </script>
41</body> 