js實現二級連動效果

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