省市县联动json数据

省市县联动通常指的是在一个Web应用中，用户可以通过选择省份来动态加载对应的城市列表，再通过选择城市来动态加载对应的县区列表。这种功能通常用于地址选择器或者注册表单中。实现这一功能需要一个包含省市县数据的JSON格式的数据源。

基础概念

JSON（JavaScript Object Notation）：一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。
联动：指的是页面上多个下拉菜单之间的交互，一个菜单的选择会影响另一个菜单的显示内容。

类型

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

应用场景

注册表单：用户填写个人信息时选择地址。
物流系统：选择配送地址时使用。
数据分析：按地区划分数据进行统计和分析。

示例JSON数据结构

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

实现步骤

准备JSON数据：如上所示的结构。
HTML结构：创建三个下拉菜单分别对应省、市、县。
JavaScript逻辑：监听省份和城市的改变事件，根据选择动态填充下一级的选项。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市县联动</title>
<script>
window.onload = function() {
  var data = {
    // 上面的JSON数据
  };

  var provinceSelect = document.getElementById('province');
  var citySelect = document.getElementById('city');
  var countySelect = document.getElementById('county');

  // 初始化省份
  data.provinces.forEach(function(province) {
    var option = document.createElement('option');
    option.value = province.name;
    option.textContent = province.name;
    provinceSelect.appendChild(option);
  });

  // 省份改变事件
  provinceSelect.addEventListener('change', function() {
    var selectedProvince = this.value;
    citySelect.innerHTML = '<option value="">请选择城市</option>';
    countySelect.innerHTML = '<option value="">请选择县区</option>';
    data.provinces.forEach(function(province) {
      if (province.name === selectedProvince) {
        province.cities.forEach(function(city) {
          var option = document.createElement('option');
          option.value = city.name;
          option.textContent = city.name;
          citySelect.appendChild(option);
        });
      }
    });
  });

  // 城市改变事件
  citySelect.addEventListener('change', function() {
    var selectedProvince = provinceSelect.value;
    var selectedCity = this.value;
    countySelect.innerHTML = '<option value="">请选择县区</option>';
    data.provinces.forEach(function(province) {
      if (province.name === selectedProvince) {
        province.cities.forEach(function(city) {
          if (city.name === selectedCity) {
            city.counties.forEach(function(county) {
              var option = document.createElement('option');
              option.value = county;
              option.textContent = county;
              countySelect.appendChild(option);
            });
          }
        });
      }
    });
  });
};
</script>
</head>
<body>
<select id="province">
  <option value="">请选择省份</option>
</select>
<select id="city">
  <option value="">请选择城市</option>
</select>
<select id="county">
  <option value="">请选择县区</option>
</select>
</body>
</html>