城市三级联动json

城市三级联动通常指的是在前端页面上，通过下拉菜单的形式，实现省、市、区（县）三级数据的联动选择。这种功能在地址选择、注册表单等场景中非常常见。下面我将详细介绍这个功能的基础概念、优势、类型、应用场景，以及可能遇到的问题和解决方案。

基础概念

城市三级联动是通过前端技术实现的一种动态交互效果。用户在选择省（自治区、直辖市）后，市的选择项会动态更新为所选省下的所有市；同理，在选择市之后，区的选择项会更新为所选市下的所有区。

优势

用户体验好：用户无需手动输入，通过简单的点击即可完成地址选择，提高了填写效率。
数据准确：避免了手动输入可能带来的拼写错误。
便于维护：数据集中管理，一旦行政区划发生变化，只需更新数据源即可。

类型

静态数据：将所有省市区数据直接嵌入到前端代码中。
动态数据：通过后端接口实时获取最新的省市区数据。

应用场景

电商平台的收货地址选择
注册表单中的地址填写
物流配送系统的地址管理

示例代码

以下是一个简单的静态数据实现城市三级联动的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市三级联动</title>
    <script>
        var data = {
            "北京市": {
                "北京市": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"]
            },
            // ... 其他省市区数据
        };

        function updateCities() {
            var province = document.getElementById("province").value;
            var citySelect = document.getElementById("city");
            citySelect.innerHTML = "";
            for (var city in data[province]) {
                var option = document.createElement("option");
                option.value = city;
                option.text = city;
                citySelect.appendChild(option);
            }
            updateDistricts();
        }

        function updateDistricts() {
            var province = document.getElementById("province").value;
            var city = document.getElementById("city").value;
            var districtSelect = document.getElementById("district");
            districtSelect.innerHTML = "";
            for (var district of data[province][city]) {
                var option = document.createElement("option");
                option.value = district;
                option.text = district;
                districtSelect.appendChild(option);
            }
        }
    </script>
</head>
<body>
    <select id="province" onchange="updateCities()">
        <option value="">请选择省份</option>
        <option value="北京市">北京市</option>
        <!-- ... 其他省份选项 -->
    </select>
    <select id="city" onchange="updateDistricts()">
        <option value="">请选择城市</option>
    </select>
    <select id="district">
        <option value="">请选择区县</option>
    </select>
</body>
</html>