三级联动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成为理想的数据交换语言。

类型与应用场景

类型：JSON数据通常以键值对的形式存在，可以表示对象（Object）或数组（Array）。
应用场景：三级联动效果中，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>
function updateCities() {
  var provinceSelect = document.getElementById('province');
  var citySelect = document.getElementById('city');
  var districtSelect = document.getElementById('district');
  
  // 清空城市和区县选项
  citySelect.innerHTML = '<option value="">请选择城市</option>';
  districtSelect.innerHTML = '<option value="">请选择区县</option>';
  
  // 获取选中的省份
  var selectedProvince = JSON.parse(provincesData)[provinceSelect.value];
  
  // 填充城市选项
  selectedProvince.cities.forEach(function(city) {
    var option = document.createElement('option');
    option.value = city.name;
    option.text = city.name;
    citySelect.appendChild(option);
  });
}

function updateDistricts() {
  var citySelect = document.getElementById('city');
  var districtSelect = document.getElementById('district');
  
  // 清空区县选项
  districtSelect.innerHTML = '<option value="">请选择区县</option>';
  
  // 获取选中的城市
  var selectedProvince = JSON.parse(provincesData)[document.getElementById('province').value];
  var selectedCity = selectedProvince.cities.find(function(city) { return city.name == citySelect.value; });
  
  // 填充区县选项
  selectedCity.districts.forEach(function(district) {
    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>
  <!-- 动态生成省份选项 -->
</select>

<select id="city" onchange="updateDistricts()">
  <option value="">请选择城市</option>
</select>

<select id="district">
  <option value="">请选择区县</option>
</select>

<script>
// 假设provincesData是上面给出的JSON数据字符串
var provincesData = `...`; // 这里填入上面的JSON数据
var provinces = JSON.parse(provincesData).provinces;
var provinceSelect = document.getElementById('province');

// 初始化省份选项
provinces.forEach(function(province) {
  var option = document.createElement('option');
  option.value = province.name;
  option.text = province.name;
  provinceSelect.appendChild(option);
});
</script>

</body>
</html>