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

文章标签： JavaScript

2023-05-04 00:30:06 发布

实现城市选择器功能可以通过以下步骤： 1. 创建一个包含城市数据的数组，如下所示：

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

2. 在HTML中创建一个省市选择器的表单，如下所示：

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

3. 在JavaScript中动态生成省份选项，如下所示：

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);
});

4. 监听省份选择器的change事件，动态生成城市选项，如下所示：

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);
  });
});