js实现省份城市

实现省份城市联动选择

数据结构设计

使用嵌套对象或数组存储省份和城市数据，例如：

const provinceData = {
  "广东省": ["广州市", "深圳市", "珠海市"],
  "江苏省": ["南京市", "苏州市", "无锡市"],
  "浙江省": ["杭州市", "宁波市", "温州市"]
};

HTML结构

创建两个select元素分别用于选择省份和城市：

<select id="province"></select>
<select id="city"></select>

初始化省份选项

页面加载时填充省份下拉框：

const provinceSelect = document.getElementById('province');
Object.keys(provinceData).forEach(province => {
  const option = document.createElement('option');
  option.value = province;
  option.textContent = province;
  provinceSelect.appendChild(option);
});

城市联动逻辑

当省份选择变化时更新城市选项：

provinceSelect.addEventListener('change', function() {
  const citySelect = document.getElementById('city');
  citySelect.innerHTML = ''; // 清空现有城市选项

  const selectedProvince = this.value;
  if (selectedProvince) {
    provinceData[selectedProvince].forEach(city => {
      const option = document.createElement('option');
      option.value = city;
      option.textContent = city;
      citySelect.appendChild(option);
    });
  }
});

完整实现示例

document.addEventListener('DOMContentLoaded', function() {
  const provinceData = {
    "广东省": ["广州市", "深圳市", "珠海市"],
    "江苏省": ["南京市", "苏州市", "无锡市"],
    "浙江省": ["杭州市", "宁波市", "温州市"]
  };

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

  // 初始化省份
  Object.keys(provinceData).forEach(province => {
    const option = document.createElement('option');
    option.value = province;
    option.textContent = province;
    provinceSelect.appendChild(option);
  });

  // 省份变更事件
  provinceSelect.addEventListener('change', function() {
    citySelect.innerHTML = '<option value="">--请选择城市--</option>';

    const selectedProvince = this.value;
    if (selectedProvince) {
      provinceData[selectedProvince].forEach(city => {
        const option = document.createElement('option');
        option.value = city;
        option.textContent = city;
        citySelect.appendChild(option);
      });
    }
  });

  // 触发初始change事件
  provinceSelect.dispatchEvent(new Event('change'));
});

优化建议

对于大量数据可以考虑以下优化：

• 使用AJAX异步加载数据
• 添加缓存机制
• 实现搜索功能
• 使用第三方库如jQuery或Select2增强用户体验

注意事项

• 确保DOM加载完成后再执行JavaScript代码
• 处理空选择情况
• 考虑添加默认提示选项
• 移动端适配需要考虑触摸体验