本文實例講述了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>