二级联动json

{
  "provinces": [
    {
      "name": "广东省",
      "cities": ["广州市", "深圳市", "珠海市"]
    },
    {
      "name": "湖南省",
      "cities": ["长沙市", "株洲市", "湘潭市"]
    }
  ]
}

// 假设json数据已经通过某种方式加载到变量jsonData中
const jsonData = {
  // ... 上面的JSON数据 ...
};

const provinceSelect = document.getElementById('province');
const citySelect = document.getElementById('city');

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

// 省份改变时更新城市选项
provinceSelect.addEventListener('change', function() {
  const selectedProvince = this.value;
  const cities = jsonData.provinces.find(p => p.name === selectedProvince).cities;

  // 清空现有城市选项
  citySelect.innerHTML = '';

  // 添加新城市选项
  cities.forEach(city => {
    const option = document.createElement('option');
    option.value = city;
    option.textContent = city;
    citySelect.appendChild(option);
  });
});