当前位置：首页 > JavaScript

js实现省市联动

2026-03-01 04:52:18JavaScript

实现省市联动的方法

省市联动是常见的表单交互需求，通常指选择省份后动态加载对应的城市列表。以下是使用纯JavaScript实现的几种方法：

数据结构准备

采用对象存储省市数据，键为省份名，值为城市数组：

js实现省市联动

const provinceCityData = {
  "北京市": ["东城区", "西城区", "朝阳区"],
  "上海市": ["黄浦区", "徐汇区", "浦东新区"],
  "广东省": ["广州市", "深圳市", "珠海市"]
};

HTML结构

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

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

初始化省份下拉框

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

js实现省市联动

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

绑定change事件

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

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

  const selectedProvince = this.value;
  const cities = provinceCityData[selectedProvince];

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

优化建议

对于实际项目，可以考虑以下优化：

使用AJAX从服务器动态获取省市数据
添加默认提示选项如"请选择省份"
实现三级联动（省-市-区县）
使用数据缓存减少重复请求

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <title>省市联动示例</title>
</head>
<body>
  <select id="province"></select>
  <select id="city"></select>

  <script>
    const provinceCityData = {
      "北京市": ["东城区", "西城区", "朝阳区"],
      "上海市": ["黄浦区", "徐汇区", "浦东新区"],
      "广东省": ["广州市", "深圳市", "珠海市"]
    };

    window.onload = function() {
      const provinceSelect = document.getElementById('province');
      const citySelect = document.getElementById('city');

      // 添加默认选项
      const defaultOption = document.createElement('option');
      defaultOption.value = '';
      defaultOption.textContent = '请选择省份';
      provinceSelect.appendChild(defaultOption);

      // 填充省份
      Object.keys(provinceCityData).forEach(province => {
        const option = document.createElement('option');
        option.value = province;
        option.textContent = province;
        provinceSelect.appendChild(option);
      });

      // 监听省份变化
      provinceSelect.addEventListener('change', function() {
        citySelect.innerHTML = '';
        const defaultCityOption = document.createElement('option');
        defaultCityOption.value = '';
        defaultCityOption.textContent = '请选择城市';
        citySelect.appendChild(defaultCityOption);

        const selectedProvince = this.value;
        if (selectedProvince) {
          const cities = provinceCityData[selectedProvince];
          cities.forEach(city => {
            const option = document.createElement('option');
            option.value = city;
            option.textContent = city;
            citySelect.appendChild(option);
          });
        }
      });
    };
  </script>
</body>
</html>

以上实现方案适用于大多数前端场景，可根据实际需求进行调整和扩展。