当前位置：首页 > JavaScript

js实现省市

2026-03-15 08:33:13JavaScript

JavaScript 实现省市联动选择

数据结构准备

省市联动通常需要预先定义层级数据，可采用以下格式存储省市级联数据：

const provinceCityData = [
  {
    name: "北京市",
    cities: ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区"]
  },
  {
    name: "上海市",
    cities: ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区"]
  }
  // 其他省份数据...
]

HTML 结构

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

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

初始化省份列表

页面加载时填充省份选项：

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

城市联动更新

当省份选择变化时动态更新城市列表：

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

  const selectedProvince = provinceCityData.find(
    p => p.name === this.value
  );

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

完整实现示例

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

  // 初始化省份
  provinceCityData.forEach(province => {
    const option = new Option(province.name, province.name);
    provinceSelect.add(option);
  });

  // 省份变更事件
  provinceSelect.addEventListener('change', function() {
    citySelect.innerHTML = '<option value="">请选择城市</option>';
    const selectedProvince = provinceCityData.find(
      p => p.name === this.value
    );

    if (selectedProvince) {
      selectedProvince.cities.forEach(city => {
        citySelect.add(new Option(city, city));
      });
    }
  });

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

优化建议

使用 AJAX 动态加载数据可减少初始页面体积
添加默认提示选项如"请选择省份"
考虑使用第三方库如 jQuery 简化 DOM 操作
对大数据量省份可采用虚拟滚动优化性能

第三方库实现

使用 jQuery 的简化版本：

js实现省市

$('#province').change(function() {
  $('#city').empty();
  const cities = provinceCityData.find(p => p.name === $(this).val()).cities;
  $.each(cities, (i, city) => $('#city').append($('<option>').val(city).text(city)));
});