如何禁用下拉菜单选项？实现关联下拉选项的双向禁用联动

现有数据结构 #

const data = {
  games: {
    type: [
      { id: 1, value: "Indoor" },
      { id: 2, value: "Outdoor" }
    ],
    sport: [
      { id: 1, value: "Tennis" },
      { id: 2, value: "Chess" },
      { id: 3, value: "Football" }
    ]
  }
};

联动规则要求 #

前置逻辑 #

室内类型仅支持棋牌类运动，室外类型仅支持球类运动。

正向联动（先选类型，限制运动选项） #

• 选中「Indoor（室内）」时，禁用运动下拉菜单中的「Tennis（网球）」和「Football（足球）」选项
• 选中「Outdoor（室外）」时，禁用运动下拉菜单中的「Chess（国际象棋）」选项

反向联动（先选运动，限制类型选项） #

• 选中「Chess（国际象棋）」时，禁用类型下拉菜单中的「Outdoor（室外）」选项
• 选中「Tennis（网球）」或「Football（足球）」时，禁用类型下拉菜单中的「Indoor（室内）」选项

修改数据结构的方案 #

为了将联动规则内置到数据中，避免硬编码判断逻辑，建议给每个选项添加允许关联的选项ID列表，修改后的数据如下：

const data = {
  games: {
    type: [
      { 
        id: 1, 
        value: "Indoor",
        allowedSports: [2] // 允许关联的运动ID：对应Chess
      },
      { 
        id: 2, 
        value: "Outdoor",
        allowedSports: [1, 3] // 允许关联的运动ID：对应Tennis、Football
      }
    ],
    sport: [
      { 
        id: 1, 
        value: "Tennis",
        allowedTypes: [2] // 允许关联的类型ID：对应Outdoor
      },
      { 
        id: 2, 
        value: "Chess",
        allowedTypes: [1] // 允许关联的类型ID：对应Indoor
      },
      { 
        id: 3, 
        value: "Football",
        allowedTypes: [2] // 允许关联的类型ID：对应Outdoor
      }
    ]
  }
};

实现禁用逻辑的思路 #

1. 正向联动处理：

   • 监听类型下拉菜单的选中值，获取该类型对应的allowedSports数组
   • 遍历运动下拉的所有选项，若选项的id不在allowedSports数组内，则将该选项设置为禁用状态

2. 反向联动处理：

   • 监听运动下拉菜单的选中值，获取该运动对应的allowedTypes数组
   • 遍历类型下拉的所有选项，若选项的id不在allowedTypes数组内，则将该选项设置为禁用状态

（注：已提供可运行的React TypeScript沙箱环境，可基于上述数据结构修改逻辑）

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