Angular中获取多选下拉框选中值并验证无重复及正确性

首先，假设你的组件里已经维护了一个存储选中值的数组（比如 selectedAnswers），每个下拉框通过 ngModel 绑定到数组对应位置，示例HTML结构如下：

<!-- *ngFor生成6个select下拉框 -->
<select *ngFor="let _ of [0,1,2,3,4,5]; let i = index" [(ngModel)]="selectedAnswers[i]">
  <option value="Ezel">Ezel</option>
  <option value="Paard">Paard</option>
  <option value="Kikker">Kikker</option>
  <option value="Slang">Slang</option>
  <option value="Vleermuis">Vleermuis</option>
  <option value="Rog">Rog</option>
  <option value="">请选择</option>
</select>
<button (click)="checkAnswers()">校验答案</button>

接下来在组件类中实现 checkAnswers 方法，核心完成无重复校验和完全匹配指定动物集合两个逻辑：

import { Component } from '@angular/core';

@Component({
  selector: 'app-animal-select',
  templateUrl: './animal-select.component.html',
  styleUrls: ['./animal-select.component.css']
})
export class AnimalSelectComponent {
  // 存储每个下拉框的选中值，初始化6个空值对应6个select
  selectedAnswers: string[] = new Array(6).fill('');
  // 指定的目标动物集合，用Set提升查找效率
  private targetAnimals = new Set(['Ezel', 'Paard', 'Kikker', 'Slang', 'Vleermuis', 'Rog']);

  checkAnswers(): boolean {
    // 1. 过滤空值，排除未选择的项
    const validSelections = this.selectedAnswers.filter(item => item.trim() !== '');
    
    // 2. 校验是否完成所有6项选择
    if (validSelections.length !== 6) {
      alert('请完成所有选项的选择');
      return false;
    }

    // 3. 校验是否存在重复值（Set自动去重，长度不一致则说明有重复）
    const uniqueSelections = new Set(validSelections);
    if (uniqueSelections.size !== 6) {
      alert('存在重复选择的动物，请修改');
      return false;
    }

    // 4. 校验选中集合与目标集合完全匹配（无缺失、无多余）
    const isFullMatch = [...uniqueSelections].every(animal => this.targetAnimals.has(animal)) &&
                        [...this.targetAnimals].every(animal => uniqueSelections.has(animal));
    
    if (isFullMatch) {
      alert('答案正确！');
      return true;
    } else {
      alert('选择的动物不符合要求，请检查');
      return false;
    }
  }
}

逻辑说明 #

• 过滤空值：避免未选择的项干扰后续校验；
• 数量校验：确保所有下拉框都已完成选择；
• 重复校验：利用Set自动去重的特性，通过长度对比快速判断重复；
• 完全匹配校验：通过双向every检查，确保选中集合和目标集合既无缺失也无多余项。

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