JavaScript省市区三级联动下拉菜单

在JavaScript中创建一个省市区三级联动的下拉菜单通常涉及到以下几个步骤：

1. 数据准备：首先，你需要一个包含省份、城市和区县数据的JSON对象，例如：

const regions = [
  { province: '北京', cities: [{ city: '东城区', districts: [] }, ...] },
  { province: '上海', cities: [...] },
  // 其他省市...
];

2. HTML结构：创建HTML模板，包括三个级联的select元素：

<select id="province" onchange="loadCities()">
  <option value="">请选择省份</option>
  <!-- 通过JavaScript动态填充省份 -->
</select>

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

<select id="district">
  <option value="">请选择区县</option>
</select>

3. JavaScript逻辑：编写函数来处理联动效果。`loadCities` 函数会在用户选择省份后，从数据中筛选出对应的城市列表，并填充到城市下拉框：

function loadCities() {
  const selectedProvince = document.getElementById('province').value;
  if (selectedProvince) {
    document.getElementById('city').innerHTML = '<option value="">请选择城市</option>';
    // 使用map遍历地区数据，只显示选中省份的城市
    regions.find(region => region.province === selectedProvince).cities.forEach(city => {
      document.getElementById('city').innerHTML += `<option value="${city.city}">${city.city}</option>`;
    });
  } else {
    document.getElementById('city').selectedIndex = -1; // 清空城市选择
  }
  
  // 类似的逻辑可以应用到加载区县
}

4. 初始化省级数据：最后，在页面加载完成后，初始化一次省级下拉菜单：

window.onload = function() {
  regions.forEach(region => {
    document.getElementById('province').innerHTML += `<option value="${region.province}">${region.province}</option>`;
  });
};