json省市县级联菜单

JSON省市县级联菜单是一种常见的前端应用场景，用于实现行政区划的多级联动选择。以下是关于这个问题的详细解答：

基础概念

JSON（JavaScript Object Notation）：一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。
省市县级联菜单：用户在选择省份时，市级选项会根据所选省份动态更新；同理，选择市后，县级选项也会相应更新。

类型

静态JSON：预先定义好的JSON文件，包含所有省市县的数据。
动态JSON：通过API从服务器实时获取数据。

应用场景

注册页面：用户填写个人信息时选择地址。
物流系统：选择配送地址时使用。
数据分析平台：按地区筛选数据。

示例代码

以下是一个简单的HTML和JavaScript示例，展示如何实现省市县级联菜单：

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>
    <select id="county">
        <option value="">请选择区县</option>
    </select>

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

JavaScript部分（data.js）

假设我们有一个包含省市县数据的JSON对象：

const regions = {
    "北京市": {
        "北京市": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"]
    },
    "上海市": {
        "上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明区"]
    },
    // 其他省市县数据...
};

JavaScript部分（script.js）

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

    // 初始化省份选项
    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>';
        countySelect.innerHTML = '<option value="">请选择区县</option>';

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

    // 城市选择变化时更新区县选项
    citySelect.addEventListener('change', function() {
        const selectedProvince = provinceSelect.value;
        const selectedCity = this.value;
        countySelect.innerHTML = '<option value="">请选择区县</option>';

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