如何将三级联动下拉菜单扩展至十级？JS实现遇阻求助

核心思路 #

别用固定十级的嵌套数组和手动绑定每个下拉的onchange，这会导致代码冗余到爆炸。改用树形数据结构+通用事件处理+动态DOM操作，不管多少级都能适配。

1. 调整数据结构 #

把原来的固定嵌套数组改成树形结构，每个节点包含value（选项值）、label（显示文本）、children（子选项数组，没有下一级就留空数组）：

const cascadeData = [
  {
    value: 'l1-1',
    label: '一级选项1',
    children: [
      {
        value: 'l2-1',
        label: '二级选项1',
        children: [
          {
            value: 'l3-1',
            label: '三级选项1',
            children: [
              // 继续往下嵌套，直到第十级，按需设置子节点即可
            ]
          }
        ]
      }
    ]
  },
  {
    value: 'l1-2',
    label: '一级选项2',
    children: []
  }
];

2. HTML结构 #

不用手动写10个<select>，只需要一个容器放所有下拉：

<div id="cascade-container"></div>

3. JS实现逻辑 #

初始化生成第一级下拉

const container = document.getElementById('cascade-container');

// 生成下拉菜单的通用函数
function createSelect(level, options = []) {
  const select = document.createElement('select');
  select.dataset.level = level; // 标记当前层级，方便后续处理
  // 添加默认空选项
  select.innerHTML = '<option value="">请选择</option>';
  // 追加传入的选项
  options.forEach(opt => {
    const option = document.createElement('option');
    option.value = opt.value;
    option.textContent = opt.label;
    select.appendChild(option);
  });
  // 绑定通用change事件
  select.addEventListener('change', handleSelectChange);
  container.appendChild(select);
  return select;
}

// 初始化第一级下拉
createSelect(0, cascadeData);

通用change事件处理函数

这个函数会处理所有层级的下拉变化，自动更新下一级，并清空后面所有层级的下拉：

function handleSelectChange(e) {
  const currentSelect = e.target;
  const currentLevel = parseInt(currentSelect.dataset.level);
  const selectedValue = currentSelect.value;

  // 逐级找到当前选中项对应的子节点数据
  let currentData = cascadeData;
  for (let i = 0; i < currentLevel; i++) {
    const prevSelect = container.querySelectorAll('select')[i];
    const prevValue = prevSelect.value;
    currentData = currentData.find(item => item.value === prevValue)?.children || [];
  }
  const selectedItem = currentData.find(item => item.value === selectedValue);
  const nextLevel = currentLevel + 1;

  // 清空当前层级之后的所有下拉菜单
  const allSelects = container.querySelectorAll('select');
  for (let i = nextLevel; i < allSelects.length; i++) {
    allSelects[i].remove();
  }

  // 如果当前选中项有子节点，生成下一级下拉
  if (selectedItem?.children?.length) {
    createSelect(nextLevel, selectedItem.children);
  }
}

为什么这方法能解决你的问题 #

• 数据结构灵活：不管是3级还是10级，只要在children里嵌套就行，不用改代码结构
• 不用手动写10个onchange：一个通用函数搞定所有层级的变化逻辑
• 自动维护后续层级：前面的选项变了，后面的下拉会自动清空并重新生成，不会出现残留的旧选项

内容的提问来源于stack exchange，提问作者Kaley