省市三级联动json数据

省市三级联动通常指的是在前端页面上，通过下拉选择框（select）实现省、市、区/县三级选项的联动效果。用户选择省份后，市级选项会更新为对应省份的城市列表；选择城市后，区/县级选项会更新为对应城市的区县列表。这种效果通常通过JavaScript和后端API配合实现。

基础概念

JSON（JavaScript Object Notation）：一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。
AJAX（Asynchronous JavaScript and XML）：一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

类型

静态JSON：预先定义好的JSON文件，适用于数据不经常变动的场景。
动态JSON：通过API实时获取的JSON数据，适用于数据需要频繁更新的场景。

应用场景

注册表单：用户填写地址信息时使用。
物流系统：选择配送地址时使用。
数据分析工具：按地区筛选数据时使用。

示例代码

以下是一个简单的省市三级联动的示例代码：

HTML部分

<select id="province">
  <option value="">请选择省份</option>
</select>
<select id="city">
  <option value="">请选择城市</option>
</select>
<select id="district">
  <option value="">请选择区县</option>
</select>

JavaScript部分

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

  // 假设这是从后端获取的省份数组
  const provinces = [
    { id: '1', name: '广东省' },
    { id: '2', name: '湖南省' },
    // ... 其他省份
  ];

  // 初始化省份选项
  provinces.forEach(province => {
    const option = document.createElement('option');
    option.value = province.id;
    option.textContent = province.name;
    provinceSelect.appendChild(option);
  });

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

    if (provinceId) {
      // 假设这是从后端获取的城市数组
      const cities = getCitiesByProvinceId(provinceId);
      cities.forEach(city => {
        const option = document.createElement('option');
        option.value = city.id;
        option.textContent = city.name;
        citySelect.appendChild(option);
      });
    }
  });

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

    if (cityId) {
      // 假设这是从后端获取的区县数组
      const districts = getDistrictsByCityId(cityId);
      districts.forEach(district => {
        const option = document.createElement('option');
        option.value = district.id;
        option.textContent = district.name;
        districtSelect.appendChild(option);
      });
    }
  });

  // 模拟获取城市数据的函数
  function getCitiesByProvinceId(provinceId) {
    // 这里应该是AJAX请求，返回对应省份的城市数据
    return [
      { id: '101', name: '广州市' },
      { id: '102', name: '深圳市' },
      // ... 其他城市
    ];
  }

  // 模拟获取区县数据的函数
  function getDistrictsByCityId(cityId) {
    // 这里应该是AJAX请求，返回对应城市的区县数据
    return [
      { id: '1001', name: '天河区' },
      { id: '1002', name: '越秀区' },
      // ... 其他区县
    ];
  }
});