js省市县三级联动菜单

基础概念

省市县三级联动菜单是一种常见的前端交互设计，用于在一个网页上展示并选择省、市、县三个层级的行政区划。用户选择某个省份后，相应的市级选项会更新；选择某个市后，县级选项也会更新。

类型与应用场景

静态数据：适用于数据量不大且不经常变动的场景。
动态数据：适用于需要实时更新或数据量较大的应用，如在线注册、物流配送等。

实现方法

通常使用JavaScript结合HTML和CSS来实现。以下是一个简单的示例：

HTML部分

<select id="province">
  <option value="">请选择省份</option>
</select>
<select id="city">
  <option value="">请选择城市</option>
</select>
<select id="county">
  <option value="">请选择县区</option>
</select>

JavaScript部分

const data = {
  "北京市": {
    "北京市": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"]
  },
  // ... 其他省份和城市数据
};

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

// 初始化省份选项
for (let province in data) {
  let option = document.createElement('option');
  option.value = province;
  option.text = province;
  provinceSelect.appendChild(option);
}

// 省份改变时更新城市选项
provinceSelect.addEventListener('change', function() {
  let province = this.value;
  citySelect.innerHTML = '<option value="">请选择城市</option>';
  countySelect.innerHTML = '<option value="">请选择县区</option>';
  if (province) {
    for (let city in data[province]) {
      let option = document.createElement('option');
      option.value = city;
      option.text = city;
      citySelect.appendChild(option);
    }
  }
});

// 城市改变时更新县区选项
citySelect.addEventListener('change', function() {
  let province = provinceSelect.value;
  let city = this.value;
  countySelect.innerHTML = '<option value="">请选择县区</option>';
  if (city) {
    data[province][city].forEach(function(county) {
      let option = document.createElement('option');
      option.value = county;
      option.text = county;
      countySelect.appendChild(option);
    });
  }
});