我正在做一个multiple selection有两个下拉菜单的项目，如果我在第一个下拉菜单中选择了squirtle，那么第二个下拉菜单中的选项就会被禁用，但这并不是预期的输出：
1.当有人从第一个下拉列表中选择一个选项时，整个选项组都应该从第二个下拉列表中禁用/启用（仅第二个下拉列表）。例如，如果我从第一个下拉列表中的Water组中选择Squirtle，则整个Water组都应该在第二个下拉列表中禁用/启用
1.多选应该只适用于某个组。例如，如果我从第一个下拉列表中的Water组中选择Squirtle，我应该只能从第一个下拉列表中的Water组中选择另一个选项（在第二个下拉列表中没有这样的限制，因为在第一个下拉列表中选择的组在第二个下拉列表中被完全禁用（或删除）），如果我尝试从另一个组中选择，两个下拉列表都应该重置。
下面是JSON：

items = [
    {
      type: 'all',
      name: ['All Pokemon'],
    },
    {
      type: 'water',
      name: [
        'Squirtle',
        'Wartortle',
        'Blastoise',
        'Psyduck',
        'Golduck',
        'Tentacool',
        'Seel',
      ],
    },
    {
      type: 'fire',
      name: [
        'Charmander',
        'Charizard',
        'Vulpix',
        'Arcanine',
        'Ponyta',
        'Magmar',
        'Cyndaquil',
      ],
    },
    {
      type: 'earth',
      name: ['Growlithe', 'Arcanine', 'Geodude', 'Golem', 'Onix'],
    },
  ];

我创建了两个数组：

this.arr1 = this.items;
this.arr2 = this.items.filter((x) => x.type !== 'all');

现在，当用户从第一个下拉列表(arr1)中选择一个选项时，我将尝试使用以下逻辑根据第一个下拉列表中选择的选项从(arr2)中过滤掉整个对象：

this.arr2.filter((x) => {
   console.log(x.name);
   const data = [];
   !includeTest.find((y) => {
        console.log('y ->', y);
        if (x.name.includes(y)) {
          data.push(y);
          console.log('data ->', data);
        }
      });
      x.name = data;
      console.log('x.name', x.name);
    });

这里，includeTest包含一个字符串数组，我必须根据这个数组过滤掉另一个数组中的对象。这是problem的stackblitz表示：