js实现三级级联

实现三级级联的核心思路

三级级联通常指三个下拉菜单之间的联动选择，例如省市区选择。当第一级选择变化时，第二级和第三级内容相应更新；第二级变化时，第三级内容更新。

数据结构准备

使用嵌套对象或数组存储级联数据。例如：

const regionData = {
  '江苏省': {
    '南京市': ['玄武区', '鼓楼区'],
    '苏州市': ['姑苏区', '工业园区']
  },
  '浙江省': {
    '杭州市': ['上城区', '西湖区'],
    '宁波市': ['海曙区', '江北区']
  }
};

HTML结构示例

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

JavaScript实现步骤

初始化一级菜单

const provinceSelect = document.getElementById('province');
Object.keys(regionData).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 districtSelect = document.getElementById('district');
  districtSelect.innerHTML = '<option value="">请选择</option>';

  const selectedProvince = this.value;
  if (selectedProvince) {
    Object.keys(regionData[selectedProvince]).forEach(city => {
      const option = document.createElement('option');
      option.value = city;
      option.textContent = city;
      citySelect.appendChild(option);
    });
  }
});

二级菜单变化时更新三级菜单

document.getElementById('city').addEventListener('change', function() {
  const districtSelect = document.getElementById('district');
  districtSelect.innerHTML = '<option value="">请选择</option>';

  const selectedProvince = provinceSelect.value;
  const selectedCity = this.value;
  if (selectedProvince && selectedCity) {
    regionData[selectedProvince][selectedCity].forEach(district => {
      const option = document.createElement('option');
      option.value = district;
      option.textContent = district;
      districtSelect.appendChild(option);
    });
  }
});

完整实现示例

document.addEventListener('DOMContentLoaded', function() {
  // 数据结构和HTML元素初始化代码
  // 事件监听器代码
});

优化建议

使用AJAX动态加载数据可减少初始页面负载

function loadProvinceData() {
  // 模拟AJAX请求
  fetch('/api/provinces').then(response => response.json()).then(data => {
    // 填充省份下拉框
  });
}

添加默认选项可提升用户体验

provinceSelect.innerHTML = '<option value="">请选择省份</option>';

注意事项

确保在DOM加载完成后执行JavaScript代码。对于动态创建的元素，可能需要使用事件委托。考虑添加数据验证逻辑，防止因数据缺失导致的错误。