省市二级联动json数据

{
  "北京市": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"],
  "上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明区"],
  // ... 其他省市数据
}

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

document.addEventListener('DOMContentLoaded', function() {
  const provinceSelect = document.getElementById('province');
  const citySelect = document.getElementById('city');
  let provinces = {};

  // 假设这是从后端获取的JSON数据
  fetch('/path/to/getProvincesAndCities')
    .then(response => response.json())
    .then(data => {
      provinces = data;
      for (let province in provinces) {
        let option = document.createElement('option');
        option.value = province;
        option.textContent = province;
        provinceSelect.appendChild(option);
      }
    });

  provinceSelect.addEventListener('change', function() {
    const selectedProvince = this.value;
    citySelect.innerHTML = '<option value="">请选择城市</option>'; // 清空城市选项
    if (selectedProvince) {
      provinces[selectedProvince].forEach(city => {
        let option = document.createElement('option');
        option.value = city;
        option.textContent = city;
        citySelect.appendChild(option);
      });
    }
  });
});