js實(shí)現(xiàn)地址二級(jí)聯(lián)動(dòng)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        select{
            width:100px;
        }
    </style>
</head>
<body>
    <h1>地址聯(lián)動(dòng)</h1>
    <hr>

    <span>請(qǐng)選擇您的收貨地址:</span>
    <br>
    <select name="" id="prov"></select>
    <select name="" id="city"></select>
    

    <script>
        //定義數(shù)組,存放 省的信息
        var prov_list = ['江蘇', '江西', '安徽', '臺(tái)灣', '廣東'];
        //定義數(shù)組, 城市的信息
        var city_list = [];
        city_list[0] = ['南京', '蘇州', '無(wú)錫', '常州', '揚(yáng)州', '徐州'];
        city_list[1] = ['南昌', '贛州', '九江', '婺源', '景德鎮(zhèn)', '鷹潭'];
        city_list[2] = ['合肥', '蕪湖', '馬鞍山', '安慶', '蚌埠', '宿州'];
        city_list[3] = ['臺(tái)北', '臺(tái)南', '臺(tái)中', '高雄', '基隆', '花蓮'];
        city_list[4] = ['廣州', '東莞', '深圳', '汕頭', '佛山', '潮州'];


        //獲取select元素
        var prov_select = document.getElementById('prov');
        var city_select = document.getElementById('city');

        //給 省的選擇框  填充數(shù)據(jù)
        for (var i = 0; i < prov_list.length; i ++) {
            //prov_select.innerHTML += "<option>"+prov_list[i]+"</option>"; 
        
            prov_select.add(new Option(prov_list[i], i));
        }


        //給 省的選擇框 綁定 change事件
        prov_select.onchange = function(){
            //當(dāng)前選擇了 那個(gè)省
            var index = this.value;
            //取出 該省對(duì)應(yīng)的城市
            var citys = city_list[index];

            //再填充城市之前 清空 下拉框內(nèi)容
            city_select.length = 0;

            //把城市信息 填充到 城市的選擇框中
            for (var i = 0; i < citys.length; i ++) {
                city_select.add(new Option(citys[i], i));
            }

        }


        //手工 觸發(fā) prov_select 
        prov_select.onchange();
    </script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容