js html select 二級菜單

時間 2019-11-12

原文原文鏈接

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>select二級下拉菜單</title>
</head>
<script>
    var cityArr = [];
    cityArr['江蘇省'] =
            [
                {txt:'南京', val:'南京'},
                {txt:'無錫', val:'無錫'},
                {txt:'徐州', val:'徐州'},
                {txt:'蘇州', val:'蘇州'},
                {txt:'南通', val:'南通'},
                {txt:'淮陰', val:'淮陰'},
                {txt:'揚州', val:'揚州'},
                {txt:'鎮江', val:'鎮江'},
                {txt:'常州', val:'常州'}
            ];
    cityArr['浙江省'] =
            [
                {txt:'杭州', val:'杭州'},
                {txt:'寧波', val:'寧波'},
                {txt:'溫州', val:'溫州'},
                {txt:'湖州', val:'湖州'}
            ];

    function setSelectOption(selectObj, optionList, firstOption, selected) {

    }

    function setCity(province) {
        console.log(province);
        //setSelectOption('city', cityArr[province], '-請選擇-');
        var city = document.getElementById('city');
        var city_len = city.options.length;
        console.log(city_len);
        for(var i = 0; i < city_len; i++) {
            if(city_len > 0) {
                city.options.remove(0);
            }
        }

        if(province == "0") {
            var opt = new Option('-請選擇-', 0);
            city.options.add(opt);
        }
        else {
            var province_len = cityArr[province].length;
            for(i = 0;i< province_len; i++) {
                var opt = new Option(cityArr[province][i].txt, cityArr[province][i].val);
                city.options.add(opt);
            }
        }
    }
</script>
<body>
<form id="form2" name="diqu" method="post" action="">
    <select name="province" id="province" onchange="
        if(this.value != '')
            setCity(this.options[this.selectedIndex].value);">
        <option value="0">-請選擇-</option>
        <option value="江蘇省">江蘇省</option>
        <option value="浙江省">浙江省</option>
    </select>
    <select name="city" id="city">
        <option value="0">-請選擇-</option>
    </select>
</form>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。