html页面完成省市联动

原创已于 2023-06-26 20:51:03 修改 · 1.5k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

于 2023-06-26 20:36:44 首次发布

此代码示例展示了如何使用HTML和JavaScript实现省市联动的效果。当用户在省的选择框中选择一个选项时，市的选择框会动态更新对应城市的列表。城市数据存储在JavaScript数组中，通过DOM操作动态生成选项。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>
</head>
<body>

<select name="province" id="pro">
    <option value="">请选择省份</option>
    <option value="0">北京市</option>
    <option value="1">上海市</option>
    <option value="2">广东省</option>
</select>

<select name="city" id="city">
    <option value="">请选择市区</option>
</select>

<script>
    let cityData = new Array();
    cityData[0] = ['朝阳区', '海淀区', '丰台区'];
    cityData[1] = ['徐汇区', '长宁区', '浦东新区'];
    cityData[2] = ['广州市', '深圳市', '佛山市'];
    let pro = document.getElementById('pro');
    let city = document.getElementById('city');
    pro.onchange = function () {
        city.innerHTML = '<option value="">请选择市区</option>';
        for (let cityName of cityData[this.value]) {
            // 注意下面的是反引号``，不是单引号‘’，反引号用${}可以取出变量值
            city.innerHTML += `<option value="${cityName}">${cityName}</option>`;
        }
    }
</script>

</body>
</html>