如何使用JavaScript实现城市选择器功能？

javascript
const cities = [
  { province: '北京市', city: '北京市' },
  { province: '上海市', city: '上海市' },
  { province: '广东省', city: '广州市' },
  { province: '广东省', city: '深圳市' },
  { province: '江苏省', city: '南京市' },
  { province: '江苏省', city: '苏州市' },
  // 其他省市数据...
];

html
<form>
  <label for="province">省份：</label>
  <select id="province"></select>
  <label for="city">城市：</label>
  <select id="city"></select>
</form>

javascript
const provinceSelect = document.getElementById('province');
const provinces = [...new Set(cities.map(city => city.province))]; // 获取所有不重复的省份
provinces.forEach(province => {
  const option = document.createElement('option');
  option.value = province;
  option.text = province;
  provinceSelect.appendChild(option);
});

javascript
const citySelect = document.getElementById('city');
provinceSelect.addEventListener('change', () => {
  // 先清空城市选项
  citySelect.innerHTML = '';
  // 获取选中的省份
  const selectedProvince = provinceSelect.value;
  // 获取该省份下的城市
  const citiesInProvince = cities.filter(city => city.province === selectedProvince);
  // 动态生成城市选项
  citiesInProvince.forEach(city => {
    const option = document.createElement('option');
    option.value = city.city;
    option.text = city.city;
    citySelect.appendChild(option);
  });
});

javascript
const cities = [
  { province: '北京市', city: '北京市' },
  { province: '上海市', city: '上海市' },
  { province: '广东省', city: '广州市' },
  { province: '广东省', city: '深圳市' },
  { province: '江苏省', city: '南京市' },
  { province: '江苏省', city: '苏州市' },
  // 其他省市数据...
];

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

const provinces = [...new Set(cities.map(city => city.province))]; // 获取所有不重复的省份
provinces.forEach(province => {
  const option = document.createElement('option');
  option.value = province;
  option.text = province;
  provinceSelect.appendChild(option);
});

provinceSelect.addEventListener('change', () => {
  // 先清空城市选项
  citySelect.innerHTML = '';
  // 获取选中的省份
  const selectedProvince = provinceSelect.value;
  // 获取该省份下的城市
  const citiesInProvince = cities.filter(city => city.province === selectedProvince);
  // 动态生成城市选项
  citiesInProvince.forEach(city => {
    const option = document.createElement('option');
    option.value = city.city;
    option.text = city.city;
    citySelect.appendChild(option);
  });
});

参考资料：

MDN Web Docs: Building a custom select menu