多选下拉框二级联动逻辑实现求助（附TypeScript代码）

需求规则 #

• 选中地点为Central Office（type=1）时，第二个下拉框显示所有Office（type=0）和Division（type=1）
• 选中未标记为Central Office的Office（type=0）时，第二个下拉框显示所有Division（type=1）和Section（type=2）
• 同时选中Central Office和非总部Office时，第二个下拉框显示所有Division、Office和Section（即type=0、1、2全部包含）

相关数据 #

地点数组（location array） #

[
    {
        "label": "test(Central Office)",
        "value": "0F2B0AA8E6414D3F9EADCD3E9FB9E217",
        "type": 1
    },
    {
        "label": "test(Central Office)",
        "value": "BDCE90479A9E48A99610D32B2FE47CAF",
        "type": 1
    },
    {
        "label": "TEST OFFICE 4",
        "value": "0F86B741642C4C2386EAB57D468214E6",
        "type": 0
    },
    {
        "label": "TEST OFFICE 2",
        "value": "1843B97B86DD4F1A9BC453D270EE4F68",
        "type": 0
    },
    {
        "label": "TEST OFFICE 6",
        "value": "611FBE0D7A2F4400A8BEF92DF4C5BE09",
        "type": 0
    },
    {
        "label": "TEST OFFICE 5",
        "value": "E5AB483B32AC43E99A0A400EB05C273E",
        "type": 0
    }
]

组织单元数组（organizational array） #

[
    {
        "label": "TEST OFFICE 3(Office)",
        "value": "0F2B0AA8E6414D3F9EADCD3E9FB9E217",
        "type": 0
    },
    {
        "label": "TEST OFFICE 4(Office)",
        "value": "0F86B741642C4C2386EAB57D468214E6",
        "type": 0
    },
    {
        "label": "TEST OFFICE 2(Office)",
        "value": "1843B97B86DD4F1A9BC453D270EE4F68",
        "type": 0
    },
    {
        "label": "TEST OFFICE 6(Office)",
        "value": "611FBE0D7A2F4400A8BEF92DF4C5BE09",
        "type": 0
    },
    {
        "label": "TEST OFFICE 1(Office)",
        "value": "BDCE90479A9E48A99610D32B2FE47CAF",
        "type": 0
    },
    {
        "label": "TEST OFFICE 5(Office)",
        "value": "E5AB483B32AC43E99A0A400EB05C273E",
        "type": 0
    },
    {
        "label": "TEST DIVISION3(Division)",
        "value": "17425F2B5F3E4839A1803FE5339CBE15",
        "type": 1
    },
    {
        "label": "TEST DIVISION 2(Division)",
        "value": "4AEE41A1D3B0480B843559EC42518614",
        "type": 1
    },
    {
        "label": "TEST DIVISION 1(Division)",
        "value": "93A546AE75E841F696C601C7714FB1A1",
        "type": 1
    },
    {
        "label": "TEST SECTION 1(Section)",
        "value": "0C7B0E3F51D44C57B8E5D42EF1FD6345",
        "type": 2
    }
]

选中地点的存储格式 #

[
    "0F2B0AA8E6414D3F9EADCD3E9FB9E217",
    "BDCE90479A9E48A99610D32B2FE47CAF",
    "0F86B741642C4C2386EAB57D468214E6",
    "1843B97B86DD4F1A9BC453D270EE4F68",
    "611FBE0D7A2F4400A8BEF92DF4C5BE09",
    "E5AB483B32AC43E99A0A400EB05C273E"
]

现有TypeScript代码 #

filterOrganizationalUnits() {
    this.availableOrganizationalUnits = [];

    const filteredLocations = this.locations.filter((location: any) => {
      return (
        this.dataLocationText.includes(location.Text) || location.Type === 1
      );
    });

    console.log('location', location);

    filteredLocations.forEach((location: any) => {
      const filteredUnits = this.organizational.filter((unit: any) => {
        if (location.Type === 1 && unit.Type === 0) {
          // If selected location is Central Office, list all Offices
          return true;
        } else if (
          location.Type === 0 &&
          ((unit.Type === 1 &&
            !this.dataOrgUnitText.find(
              (parent: any) =>
                parent.Type === 0 &&
                parent.Value === location.Value &&
                parent.Text === unit.Value
            )) ||
            unit.Type === 2)
        ) {
          // If selected location is Office which region is not tagged as Central Office, list Division and Section
          return unit.Type === 1 || unit.Type === 2;
        }
        return false;
      });

      this.availableOrganizationalUnits.push(...filteredUnits);
    });

    this.new = this.availableOrganizationalUnits.map((item: any) => ({
      label:
        item.Type === 0
          ? item.Value + ' (Office)'
          : item.Type === 1
          ? item.Value + ' (Division)'
          : item.Value + ' (Section)',
      value: item.Text,
      type: item.Type,
    }));

    // Uncomment the console.log statements for debugging
    console.log('new', this.new);
    // console.log('availableOrganizationalUnits', this.availableOrganizationalUnits);
  }

关键问题梳理 #

1. 原代码选中地点的筛选逻辑错误，未基于实际选中的value集合匹配
2. 存在未定义变量location的语法错误
3. 未处理同时选中Central Office和非总部Office的场景
4. 未对重复的组织单元做去重处理

修正后的代码 #

filterOrganizationalUnits() {
    // 获取选中地点对应的完整对象集合
    const selectedLocations = this.locations.filter(location => 
        this.selectedLocationValues.includes(location.value)
    );

    // 判断选中地点的类型组合
    const hasCentralOffice = selectedLocations.some(loc => loc.type === 1);
    const hasRegularOffice = selectedLocations.some(loc => loc.type === 0);

    let filteredUnits: any[] = [];

    if (hasCentralOffice && hasRegularOffice) {
        // 同时选中两种类型，返回所有组织单元
        filteredUnits = [...this.organizational];
    } else if (hasCentralOffice) {
        // 仅选中Central Office，返回Office和Division
        filteredUnits = this.organizational.filter(unit => 
            unit.type === 0 || unit.type === 1
        );
    } else if (hasRegularOffice) {
        // 仅选中非总部Office，返回Division和Section
        filteredUnits = this.organizational.filter(unit => 
            unit.type === 1 || unit.type === 2
        );
    } else {
        // 未选中任何地点，清空选项
        filteredUnits = [];
    }

    // 按value去重，避免重复选项
    const uniqueUnits = Array.from(new Map(filteredUnits.map(unit => 
        [unit.value, unit]
    )).values());

    // 格式化为下拉框所需结构
    this.new = uniqueUnits.map(item => ({
        label: item.label,
        value: item.value,
        type: item.type
    }));

    console.log('filtered organizational units', this.new);
}

代码说明 #

1. 选中地点匹配：通过selectedLocationValues（选中地点的value数组）精准筛选对应地点对象，确保逻辑基于实际选中项
2. 场景分支处理：用两个布尔标识清晰区分三种联动场景，逻辑直观易懂
3. 去重处理：利用Map按组织单元的value去重，避免重复选项出现
4. 格式映射：直接复用原数据的label，保证显示内容与原始数据一致，避免手动拼接错误

内容的提问来源于stack exchange，提问作者Onesimus Chandra Pradhan