html二級聯(lián)動學(xué)習(xí)筆記

發(fā)布時間：2020-07-20 01:04:50 來源：網(wǎng)絡(luò) 閱讀：407 作者：知止內(nèi)明欄目：web開發(fā)

<head>
<meta charset="UTF-8">
<title></title>
<script>
/
準(zhǔn)備工作 : 準(zhǔn)備數(shù)據(jù)
/
var provinces = [
["深圳市","東莞市","惠州市","廣州市"],
["長沙市","岳陽市","株洲市","湘潭市"],
["廈門市","福州市","漳州市","泉州市"]
];
/*

確定事件: onchange
函數(shù): selectProvince()

函數(shù)里面要搞事情了
得到當(dāng)前操作元素
得到當(dāng)前選中的是那一個省份
從數(shù)組中取出對應(yīng)的城市信息

            動態(tài)創(chuàng)建城市元素節(jié)點(diǎn)
            添加到城市select中

    */
    function selectProvince(){
        var province = document.getElementById("province");
        //得到當(dāng)前選中的是哪個省份
        //alert(province.value);
        var value = province.value;
        //從數(shù)組中取出對應(yīng)的城市信息
        var cities = provinces[value];
        var citySelect = document.getElementById("city");
        //清空select中的option
        citySelect.options.length = 0;

        for (var i=0; i < cities.length; i++) {

// alert(cities[i]);
var cityText = cities[i];
//動態(tài)創(chuàng)建城市元素節(jié)點(diǎn) <option>東莞市</option>

            //創(chuàng)建option節(jié)點(diǎn)
            var option1 = document.createElement("option"); // <option></option>
            //創(chuàng)建城市文本節(jié)點(diǎn)
            var textNode = document.createTextNode(cityText) ;// 東莞市

            //將option節(jié)點(diǎn)和文本內(nèi)容關(guān)聯(lián)起來
            option1.appendChild(textNode);  //<option>東莞市</option>

// 添加到城市select中
citySelect.appendChild(option1);
}

        }

    </script>
</head>
<body>
    <!--選擇省份-->
    <select onchange="selectProvince()" id="province">
        <option value="-1">--請選擇--</option>
        <option value="0">廣東省</option>
        <option value="1">湖南省</option>
        <option value="2">福建省</option>
    </select>
    <!--選擇城市-->
    <select id="city"></select>
</body>

</html>

向AI問一下細(xì)節(jié)

html二級聯(lián)動學(xué)習(xí)筆記

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽