js实现级联菜单

实现级联菜单的方法

使用JavaScript实现级联菜单可以通过动态操作DOM元素和事件监听来完成。以下是常见的实现方式：

基础HTML结构

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

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

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

数据准备

const data = {
  '江苏省': ['南京市', '苏州市', '无锡市'],
  '浙江省': ['杭州市', '宁波市', '温州市']
};

初始化省份菜单

const provinceSelect = document.getElementById('province');
for (const province in data) {
  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 && data[selectedProvince]) {
    data[selectedProvince].forEach(city => {
      const option = document.createElement('option');
      option.value = city;
      option.textContent = city;
      citySelect.appendChild(option);
    });
  }
});

区县菜单联动

const districtData = {
  '南京市': ['玄武区', '鼓楼区', '秦淮区'],
  '苏州市': ['姑苏区', '虎丘区', '吴中区']
};

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

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

使用jQuery简化实现

如果项目中已引入jQuery，可以使用更简洁的语法：

$(function() {
  // 省份变化时更新城市
  $('#province').change(function() {
    $('#city').html('<option value="">请选择城市</option>');
    const province = $(this).val();

    if (province && data[province]) {
      $.each(data[province], function(i, city) {
        $('#city').append($('<option>').val(city).text(city));
      });
    }
  });

  // 城市变化时更新区县
  $('#city').change(function() {
    $('#district').html('<option value="">请选择区县</option>');
    const city = $(this).val();

    if (city && districtData[city]) {
      $.each(districtData[city], function(i, district) {
        $('#district').append($('<option>').val(district).text(district));
      });
    }
  });
});

使用现代前端框架实现

在Vue中实现级联菜单：

new Vue({
  el: '#app',
  data: {
    provinces: Object.keys(data),
    cities: [],
    districts: [],
    selectedProvince: '',
    selectedCity: '',
    selectedDistrict: ''
  },
  watch: {
    selectedProvince(newVal) {
      this.cities = newVal ? data[newVal] : [];
      this.selectedCity = '';
      this.districts = [];
    },
    selectedCity(newVal) {
      this.districts = newVal ? districtData[newVal] : [];
      this.selectedDistrict = '';
    }
  }
});

对应的HTML模板：

<div id="app">
  <select v-model="selectedProvince">
    <option value="">请选择省份</option>
    <option v-for="province in provinces" :value="province">
      {{ province }}
    </option>
  </select>

  <select v-model="selectedCity">
    <option value="">请选择城市</option>
    <option v-for="city in cities" :value="city">
      {{ city }}
    </option>
  </select>

  <select v-model="selectedDistrict">
    <option value="">请选择区县</option>
    <option v-for="district in districts" :value="district">
      {{ district }}
    </option>
  </select>
</div>

性能优化建议

对于大型数据集，可以考虑以下优化措施：

• 使用虚拟滚动技术处理大量选项
• 实现懒加载，只在需要时请求下级数据
• 添加防抖处理频繁的选择变化
• 缓存已加载的数据减少重复请求

注意事项

• 确保菜单的初始状态正确
• 处理边界情况如空选择
• 考虑添加默认选项和重置功能
• 保持UI一致性，如禁用下级菜单直到上级被选择