当前位置：首页 > JavaScript

js实现省市

2026-02-02 08:38:45JavaScript

JavaScript 实现省市联动选择

在 JavaScript 中实现省市联动选择功能，通常需要以下步骤：

数据结构准备

使用一个对象或数组存储省市数据，例如：

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

HTML 结构

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

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

JavaScript 实现

初始化省份下拉框：

const provinceSelect = document.getElementById('province');
for (const province in provinceData) {
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; const cities = provinceData[selectedProvince];

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


完整示例代码

```html
<!DOCTYPE html>
<html>
<head>
  <title>省市联动选择</title>
</head>
<body>
  <select id="province"></select>
  <select id="city"></select>

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

    const provinceSelect = document.getElementById('province');
    for (const province in provinceData) {
      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;
      const cities = provinceData[selectedProvince];

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

    // 初始化时触发一次change事件
    provinceSelect.dispatchEvent(new Event('change'));
  </script>
</body>
</html>

优化建议