JS實現(xiàn)二級聯(lián)動菜單，例如選擇省份下來對應(yīng)出現(xiàn)所屬城市，下面青島網(wǎng)站建設(shè)青華互聯(lián)的小編給出對應(yīng)代碼演示。

html代碼：

    <form name="form1" method="post" action="">
        省份：<select name="province" id="province" onchange="changeSelect(this.selectedIndex)"></select>
        地區(qū)：<select name="city" id="city" onchange="yourcode(this.selectedIndex)"></select>
    </form>

js代碼：

<script type="text/javascript">
    //靜態(tài)文本，可以考慮數(shù)據(jù)庫
    var arr_province = ["請選擇省/城市","北京市","上海市","天津市","重慶市","深圳市","廣東省"];
    var arr_city = [
                    ["請選擇城市/地區(qū)"],
                    ["請選擇城市/地區(qū)","東城區(qū)","西城區(qū)","朝陽區(qū)","宣武區(qū)","昌平區(qū)","大興區(qū)","豐臺區(qū)","海淀區(qū)"],
                    ["請選擇城市/地區(qū)",'寶山區(qū)','長寧區(qū)','豐賢區(qū)', '虹口區(qū)','黃浦區(qū)','青浦區(qū)','南匯區(qū)','徐匯區(qū)','盧灣區(qū)'],
                    ["請選擇城市/地區(qū)",'和平區(qū)', '河西區(qū)', '南開區(qū)', '河北區(qū)', '河?xùn)|區(qū)', '紅橋區(qū)', '塘古區(qū)', '開發(fā)區(qū)'],
                    ["請選擇城市/地區(qū)",'俞中區(qū)', '南岸區(qū)', '江北區(qū)', '沙坪壩區(qū)', '九龍坡區(qū)', '渝北區(qū)', '大渡口區(qū)', '北碚區(qū)'],
                    ["請選擇城市/地區(qū)",'福田區(qū)', '羅湖區(qū)', '鹽田區(qū)', '寶安區(qū)', '龍崗區(qū)', '南山區(qū)', '深圳周邊'],
                    ["請選擇城市/地區(qū)",'廣州市','惠州市','汕頭市','珠海市','佛山市','中山市','東莞市']
                ];
    //網(wǎng)頁加載完成，初始化菜單
    window.onload = init();//傳入函數(shù)地址
    function init(){
        console.log("window.onload");
        //首先獲取對象
        var province = document.form1.province;
        var city = document.form1.city;

        //指定省份中<option>標(biāo)記的個數(shù)
        province.length = arr_province.length;
        //循環(huán)將數(shù)組中的數(shù)據(jù)寫入<option>標(biāo)記中
        for(var i=0;i<arr_province.length;i++){
            province.options[i].text = arr_province[i];
            province.options[i].value = arr_province[i];
        }

        //修改省份列表的默認(rèn)選擇項
        var index = 0;
        province.selectedIndex = index;
        //指定城市中<option>標(biāo)記的個數(shù)
        city.length = arr_city[index].length;
        
        //循環(huán)將數(shù)組中的數(shù)據(jù)寫入<option>標(biāo)記中
        for (var j = 0; j<arr_city[index].length;j++) {
            city.options[j].text = arr_city[index][j];
            city.options[j].value = arr_city[index][j];
        }
        //修改城市列表的默認(rèn)選擇項
        city.selectedIndex = index;
    }

    function changeSelect(index){
        //選擇對象
        var city = document.form1.city;
        //修改省份列表的選擇項
        province.selectedIndex = index;
        //指定城市中<option>標(biāo)記的個數(shù)
        city.length = arr_city[index].length;
        //循環(huán)將數(shù)組中的數(shù)據(jù)寫入<option>標(biāo)記中
        for (var j = 0; j<arr_city[index].length;j++) {
            city.options[j].text = arr_city[index][j];
            city.options[j].value = arr_city[index][j];
        }
        //修改當(dāng)前省份下城市列表的默認(rèn)選擇項
        city.selectedIndex = 0;
    }
    function yourcode(index){
        //兩級聯(lián)動選擇完畢之后你的操作
    }
</script>

代碼運行效果截圖：

掃描二維碼手機查看該文章