城市级联操作（简单的操作--适合初级学习）

最新推荐文章于 2020-08-14 19:52:17 发布

GuanJINP

最新推荐文章于 2020-08-14 19:52:17 发布

阅读量450

点赞数

分类专栏： html 文章标签： html 城市级联下拉菜单练习 html初级下拉

本文链接：https://blog.csdn.net/weixin_42617075/article/details/81946249

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在head 下写

</head>
<script type="text/javascript">
    function addProvince() {
        var prov = document.getElementById("province");
        //省份
        var provs = ["河南", "河北", "山西", "新疆"];
        prov.length = 0;
        for (var i = 0; i < provs.length; i++) {
            var op = document.createElement("option");
            op.value = provs[i];
            op.innerHTML = provs[i];
            prov.appendChild(op);
        }
        addCity();
    }

    function addCity() {
        var city = document.getElementById("city");
        var cities = [
            ["哈尔滨市","齐齐哈尔市","牡丹江市"]
            ["郑州市", "洛阳市", "开封市", "南阳市"],
            ["石家庄市", "邯郸市", "保定市"],
            ["太原市", "大同市", "晋城市", "运城市"],
            ["乌鲁木齐市", "吐鲁番地区", "哈密", "昌吉"]
        ];
        var provIndex = document.getElementById("province").selectedIndex;
        city.length = 0;
        for (var i = 0; i < cities[provIndex].length; i++) {
            var op = document.createElement("option");
            op.value = cities[provIndex][i];
            op.innerHTML = cities[provIndex][i];
            city.appendChild(op);
        }
    }
</script>

在body 里面写

<body onload="addProvince();addOption();changeOption()">
<center>
    <form method="post">
        省份：<select id="province" onchange="addCity()">
    </select>
        城市：<select id="city">
    </select>
    </form>
</center>
</body>