三级城市联动json

三级城市联动通常指的是在前端开发中，实现一个包含省、市、区三级选项的下拉选择框，并且这些选项之间存在联动关系。当用户选择某个省份时，市的选择框会更新为该省份下的所有市；同理，选择某个市时，区的选择框会更新为该市下的所有区。

基础概念

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。JSON采用完全独立于语言的文本格式，但也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使得JSON成为理想的数据交换语言。

类型与应用场景

类型：

对象（Object）：由键值对组成。
数组（Array）：有序的值列表。
值（Value）：可以是字符串、数字、对象、数组、布尔值或null。

应用场景：

配置文件：用于存储应用程序的配置信息。
数据交换：在前后端之间传输数据。
API响应：Web服务常用JSON格式返回数据。

示例代码

假设我们有以下JSON数据表示三级城市联动的信息：

{
  "provinces": [
    {
      "name": "广东省",
      "cities": [
        {
          "name": "广州市",
          "districts": ["天河区", "越秀区", "海珠区"]
        },
        {
          "name": "深圳市",
          "districts": ["南山区", "福田区", "宝安区"]
        }
      ]
    },
    {
      "name": "湖南省",
      "cities": [
        {
          "name": "长沙市",
          "districts": ["岳麓区", "芙蓉区", "天心区"]
        },
        {
          "name": "株洲市",
          "districts": ["天元区", "荷塘区", "石峰区"]
        }
      ]
    }
  ]
}

前端实现（使用JavaScript和HTML）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级城市联动</title>
<script>
  let data = {
    // 上面的JSON数据
  };

  function updateCities() {
    let provinceSelect = document.getElementById('province');
    let citySelect = document.getElementById('city');
    let districtSelect = document.getElementById('district');

    citySelect.innerHTML = '';
    districtSelect.innerHTML = '';

    let selectedProvince = data.provinces.find(p => p.name === provinceSelect.value);
    selectedProvince.cities.forEach(city => {
      let option = document.createElement('option');
      option.value = city.name;
      option.text = city.name;
      citySelect.appendChild(option);
    });

    updateDistricts();
  }

  function updateDistricts() {
    let citySelect = document.getElementById('city');
    let districtSelect = document.getElementById('district');

    districtSelect.innerHTML = '';

    let selectedProvince = data.provinces.find(p => p.name === document.getElementById('province').value);
    let selectedCity = selectedProvince.cities.find(c => c.name === citySelect.value);
    selectedCity.districts.forEach(district => {
      let option = document.createElement('option');
      option.value = district;
      option.text = district;
      districtSelect.appendChild(option);
    });
  }
</script>
</head>
<body>
  <select id="province" onchange="updateCities()">
    <option value="">请选择省份</option>
    <!-- 动态生成省份选项 -->
    <script>
      data.provinces.forEach(province => {
        let option = document.createElement('option');
        option.value = province.name;
        option.text = province.name;
        document.getElementById('province').appendChild(option);
      });
    </script>
  </select>
  <select id="city" onchange="updateDistricts()">
    <option value="">请选择城市</option>
  </select>
  <select id="district">
    <option value="">请选择区</option>
  </select>
</body>
</html>