当前位置：首页 > JavaScript

js实现省市联动

2026-04-04 05:27:59JavaScript

实现省市联动的核心思路

省市联动通常通过两级下拉菜单实现，选择省份后动态加载对应的城市列表。需要准备层级数据，并通过事件监听实现动态更新。

数据结构设计

使用对象存储省市数据，键为省份名称，值为该省对应的城市数组：

js实现省市联动

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

HTML结构

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

<select id="province">
  <option value="">请选择省份</option>
</select>

<select id="city">
  <option value="">请选择城市</option>
</select>

JavaScript实现逻辑

初始化省份下拉菜单

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

监听省份选择变化


provinceSelect.addEventListener('change', function() {
const citySelect = document.getElementById('city')
citySelect.innerHTML = '<option value="">请选择城市</option>'

const selectedProvince = this.value if (selectedProvince) { provinceCityData[selectedProvince].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">
    <option value="">请选择省份</option>
  </select>

  <select id="city">
    <option value="">请选择城市</option>
  </select>

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

    const provinceSelect = document.getElementById('province')
    Object.keys(provinceCityData).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 = '<option value="">请选择城市</option>'

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