Select2组件实现‘全选’互斥选择功能的技术咨询

嘿，针对你要实现的Select2全选逻辑——选中「全选」时清空其他所有选中项，选其他选项时自动取消「全选」的选中状态，我整理了完整的可运行代码，完美匹配你的需求：

先看HTML结构（示例） #

假设你的下拉选框是这样的，「全选」选项放在第一位，value设为空字符串（和你提供的示例代码保持一致）：

<select id="ethnicity" multiple="multiple">
  <option value="">全选</option>
  <option value="1">汉族</option>
  <option value="2">回族</option>
  <option value="3">满族</option>
  <!-- 这里可以添加更多选项 -->
</select>

核心JavaScript实现 #

// 先初始化Select2组件，同时绑定change事件处理逻辑
$("#ethnicity").select2({
  placeholder: "请选择民族", // 可选，根据你的业务需求修改
  allowClear: true // 可选，添加清空选中项的按钮
}).on('change', function() {
  const $select = $(this);
  const selectedValues = $select.val(); // 多选模式下返回数组，单选返回单个值
  const allOptionValue = ""; // 对应「全选」选项的value

  // 情况1：当前选中项包含「全选」
  if (selectedValues && selectedValues.includes(allOptionValue)) {
    // 清空所有选中项，只保留「全选」，并触发Select2的UI更新
    $select.val(allOptionValue).trigger('change.select2');
  } else {
    // 情况2：选中了其他选项，检查是否之前选中过「全选」，如果有就取消它
    const currentSelected = selectedValues || [];
    if (currentSelected.includes(allOptionValue)) {
      // 过滤掉「全选」的value，更新选中状态
      const updatedValues = currentSelected.filter(val => val !== allOptionValue);
      $select.val(updatedValues).trigger('change.select2');
    }
  }
});

关键细节说明 #

• 多选模式适配：因为全选功能是针对多选场景的，所以一定要给select标签加上multiple="multiple"属性。
• Select2事件同步：修改选中值后要调用trigger('change.select2')，而不是普通的change事件，这样才能让Select2的UI和实际选中状态保持一致，避免出现视觉上的bug。
• 灵活调整全选值：如果你的「全选」选项value不是空字符串（比如用"all"），只需要把代码里的allOptionValue改成对应的value即可。

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