省份城市二级联动json

省份城市二级联动是一种常见的前端交互效果，通常用于用户选择所在地区时提供便捷的选择方式。以下是关于这个问题的详细解答：

基础概念

省份城市二级联动是指在一个下拉列表中选择省份后，另一个下拉列表会动态更新显示所选省份对应的城市列表。这种效果通常通过JavaScript（或前端框架如React、Vue等）与后端数据交互实现。

类型

静态JSON数据：预先定义好的省份和城市数据，存储在本地或服务器上。
动态获取数据：通过API接口实时获取省份和城市数据。

应用场景

注册页面：用户填写个人信息时选择所在地区。
订单填写：在提交订单时选择配送地址。
数据分析：根据用户选择的地区进行数据筛选和分析。

示例代码

以下是一个使用静态JSON数据实现省份城市二级联动的简单示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省份城市二级联动</title>
</head>
<body>
    <select id="province">
        <option value="">请选择省份</option>
    </select>
    <select id="city">
        <option value="">请选择城市</option>
    </select>

    <script src="data.js"></script>
    <script src="script.js"></script>
</body>
</html>

JavaScript部分（data.js）

const regions = {
    "北京市": ["北京市"],
    "上海市": ["上海市"],
    "广东省": ["广州市", "深圳市", "珠海市"],
    // 其他省份和城市数据...
};

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const provinceSelect = document.getElementById('province');
    const citySelect = document.getElementById('city');

    // 初始化省份选项
    for (const province in regions) {
        const option = document.createElement('option');
        option.value = province;
        option.textContent = province;
        provinceSelect.appendChild(option);
    }

    // 省份选择变化时更新城市选项
    provinceSelect.addEventListener('change', function() {
        const selectedProvince = this.value;
        citySelect.innerHTML = '<option value="">请选择城市</option>'; // 清空并重置城市选项

        if (selectedProvince) {
            regions[selectedProvince].forEach(city => {
                const option = document.createElement('option');
                option.value = city;
                option.textContent = city;
                citySelect.appendChild(option);
            });
        }
    });
});