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

在JavaScript中创建一个省市区三级联动的下拉菜单通常涉及到HTML、CSS和JavaScript的结合。这里是一个简单的示例：

首先，在HTML部分，你可以设置三个初始的空列表作为层级结构：

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

<select id="city" style="display:none;">
  <option value="">请选择城市</option>
</select>

<select id="district" style="display:none;">
  <option value="">请选择区县</option>
</select>

然后，在JavaScript中添加事件监听和数据处理：

// 假设你有一个包含省份、城市和区县的数据数组
const data = [
  { province: '北京', cities: [{ city: '东城区', districts: [...] }, ...] },
  { province: '上海', cities: [...] },
  //...
];

// 初始化省级选择框
document.getElementById('province').addEventListener('change', function() {
  const selectedProvince = this.value;
  if (selectedProvince) {
    document.getElementById('city').innerHTML = '<option value="">请选择城市</option>';
    data.forEach(cityData => {
      if (cityData.province === selectedProvince) {
        cityData.cities.forEach(city => {
          document.getElementById('city').innerHTML += `<option value="${city.city}">${city.city}</option>`;
        });
        document.getElementById('district').style.display = 'block';
      } else {
        document.getElementById('district').style.display = 'none';
      }
    });
  } else {
    document.getElementById('city').innerHTML = '<option value="">请选择省份</option>';
    document.getElementById('district').style.display = 'none';
  }
});

// 类似地，添加城市和区县选择框的联动
document.getElementById('city').addEventListener('change', function() {
  // 更新区县选项
});

这个例子展示了如何根据用户在省份选择框的选择动态填充城市和区县选项。当你需要创建更复杂的应用时，可以考虑使用库如jQuery或现代框架（如React、Vue）来简化操作。