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

最新推荐文章于 2025-08-01 21:14:22 发布

原创最新推荐文章于 2025-08-01 21:14:22 发布 · 487 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #城市级联下拉菜单练习 #html初级下拉

html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态生成省市下拉选择框的方法。通过预定义的省份和对应城市数组，在页面加载时自动填充省份选项，并在省份选择发生变化时更新对应的城市选项。这种方法适用于需要快速实现地区选择功能的Web应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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>

效果如下：

这里写图片描述