如何构建三级Cascading dropdown的最优数据集？

要实现三级联动的下拉菜单，核心是让数据集本身维护层级关联关系，这样后续的联动逻辑会更简洁、易维护。以下是具体方案：

一、重构为层级嵌套的数据集结构 #

把三个独立的数组整合为一个嵌套结构，每个层级的选项直接包含下一级的可选数据，示例如下：

export const cascadingData = [
  {
    key: 1,
    value: 'something',
    // 一级选项对应的二级数据
    children: [
      {
        key: 11,
        value: 'something else',
        // 二级选项对应的三级数据
        children: [
          { key: 111, value: 'something else else' },
          { key: 112, value: 'another third option' }
        ]
      },
      {
        key: 12,
        value: 'another second option',
        children: [
          { key: 121, value: 'third option for 12' }
        ]
      }
    ]
  },
  {
    key: 2,
    value: 'first option 2',
    children: [
      {
        key: 21,
        value: 'second option for 2',
        children: [
          { key: 211, value: 'third option for 21' }
        ]
      }
    ]
  }
];

这种结构的优势：

• 数据逻辑清晰，直观体现三级选项的从属关系
• 无需额外维护映射关系，新增/修改选项时只需在对应层级下调整
• 联动过滤逻辑更简洁，减少出错概率

二、在组件中实现联动逻辑 #

假设你使用React，主组件中通过维护选中状态，动态过滤下一级选项：

import { useState } from 'react';
import { cascadingData } from './your-data-file';
import Dropdown from './your-dropdown-component';

function CascadingDropdownForm() {
  // 维护三个层级的选中状态
  const [selectedLevel1, setSelectedLevel1] = useState(null);
  const [selectedLevel2, setSelectedLevel2] = useState(null);
  const [selectedLevel3, setSelectedLevel3] = useState(null);

  // 根据选中的一级选项，获取对应的二级数据
  const level2Options = selectedLevel1 
    ? cascadingData.find(item => item.key === selectedLevel1)?.children || []
    : [];

  // 根据选中的二级选项，获取对应的三级数据
  const level3Options = selectedLevel2
    ? level2Options.find(item => item.key === selectedLevel2)?.children || []
    : [];

  // 一级下拉选择事件：重置二级、三级选中状态
  const handleLevel1Change = (key) => {
    setSelectedLevel1(key);
    setSelectedLevel2(null);
    setSelectedLevel3(null);
  };

  // 二级下拉选择事件：重置三级选中状态
  const handleLevel2Change = (key) => {
    setSelectedLevel2(key);
    setSelectedLevel3(null);
  };

  // 三级下拉选择事件
  const handleLevel3Change = (key) => {
    setSelectedLevel3(key);
  };

  return (
    <div>
      <Dropdown
        options={cascadingData}
        selectedKey={selectedLevel1}
        onChange={handleLevel1Change}
        placeholder="请选择一级选项"
      />
      
      <Dropdown
        options={level2Options}
        selectedKey={selectedLevel2}
        onChange={handleLevel2Change}
        placeholder="请选择二级选项"
        disabled={!selectedLevel1} // 未选一级时禁用二级
      />
      
      <Dropdown
        options={level3Options}
        selectedKey={selectedLevel3}
        onChange={handleLevel3Change}
        placeholder="请选择三级选项"
        disabled={!selectedLevel2} // 未选二级时禁用三级
      />
    </div>
  );
}

export default CascadingDropdownForm;

三、备选方案：保留独立数组但添加父级关联 #

如果因后端返回或其他限制，无法修改为嵌套结构，可以给每个选项添加parentKey字段，明确从属关系：

export const dropdown1 = [
  { key: 1, value: 'something' },
  { key: 2, value: 'first option 2' }
];

export const dropdown2 = [
  { key: 1, value: 'something else', parentKey: 1 },
  { key: 2, value: 'another second option', parentKey: 1 },
  { key: 3, value: 'second option for 2', parentKey: 2 }
];

export const dropdown3 = [
  { key: 1, value: 'something else else', parentKey: 1 },
  { key: 2, value: 'third option for 2', parentKey: 2 },
  { key: 3, value: 'third option for 3', parentKey: 3 }
];

然后在组件中通过parentKey过滤选项：

// 二级选项过滤
const level2Options = selectedLevel1 
  ? dropdown2.filter(item => item.parentKey === selectedLevel1)
  : [];

// 三级选项过滤
const level3Options = selectedLevel2
  ? dropdown3.filter(item => item.parentKey === selectedLevel2)
  : [];

这种方案虽然可行，但需要手动维护parentKey，容易出现关联错误，优先级低于嵌套结构。

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