JS簡單實現二級聯動菜單

<form method="post" action="">
        省/市：<select id="province" onchange="alter(this.selectedIndex)"></select>
        市/區：<select id="city"></select>
    </form>
    <script type="text/javascript">
        //定義省/直轄市數組
        var arr_province = ["請選擇省/直轄市","北京市","上海市","廣東省"];
        //定義市/區二維數組
        var arr_city = [
                        ["請選擇市/區"],
                        ["東城區","西城區","朝陽區","宣武區","昌平區","大興區","豐台區","海淀區"],
                        ['寶山區','長寧區','豐賢區', '虹口區','黃浦區','青浦區','南匯區','徐匯區','盧灣區'],
                        ['廣州市','惠州市','汕頭市','珠海市','佛山市','中山市','東莞市']
                    ];
        //獲取對象
        var province = document.getElementById('province');
        var city = document.getElementById('city');
        //初始化菜單
        onload = function () {
            //指定省option標記的個數
            province.length = arr_province.length;
            //數組數據寫入<option>標記中
            for(var i = 0; i < arr_province.length; i++){
                province.options[i].text = province.options[i].value = arr_province[i];
            }
            //設置省列表默認選項
            var index = 0;
            province.index = index;
            //指定城市option標記的個數
            city.length = arr_city[index].length;
            //數組數據寫入option標記
            for (var j = 0; j < arr_city[index].length; j++) {
                city.options[j].text = city.options[j].value = arr_city[index][j];
            }
        }
        function alter(index) {
            //修改省列表的選擇項
            province.index = index;
            //指定城市option標記的個數
            city.length = arr_city[index].length;
            //數組中的數據寫入option標記
            for (var j = 0; j < arr_city[index].length; j++) {
                city.options[j].text = city.options[j].value = arr_city[index][j];
            }
        }
    </script>

　　運行：