本文详解如何在 select2 多选组件中为每个已选/下拉选项动态添加「remove」按钮，并正确拦截点击事件，避免误触发选项选择，实现精准移除对应 option 元素。

本文详解如何在 select2 多选组件中为每个已选/下拉选项动态添加「remove」按钮，并正确拦截点击事件，避免误触发选项选择，实现精准移除对应 option 元素。

Select2 默认不支持在下拉选项（<option></option>）或选中标签（.select2-selection__choice）中直接嵌入可交互控件（如删除按钮），因为其内部事件机制会优先响应 select2:selecting 事件，导致点击按钮时仍执行“选中”逻辑。要实现真正的「点击删除按钮即移除选项」，关键在于：在 select2:selecting 阶段捕获原始点击事件源，判断是否命中 .remove-button，并主动阻止默认行为。

以下为完整、健壮的实现方案：

✅ 正确做法：事件委托 + 原始事件目标识别

$(document).ready(function() {
  $('#mySelect').select2({
    tags: true,
    tokenSeparators: [',', ' '],
    templateResult: formatOption // 控制下拉项渲染
  });

  function formatOption(option) {
    if (!option.id) return option.text; // 跳过空选项或搜索占位符

    // 使用 data-id 而非内联 onclick，更安全、易维护
    return $(
      `<span>${option.text}<span class="remove-button" data-id="${option.id}">×</span></span>`
    );
  }

  // 监听 selecting 事件（在选项被选中前触发）
  $('#mySelect').on('select2:selecting', function(e) {
    const target = e.params.args.originalEvent.target;

    // 检查点击目标是否为删除按钮
    if ($(target).hasClass('remove-button')) {
      e.preventDefault(); // 阻止默认选中行为
      e.stopPropagation(); // 防止事件冒泡干扰

      const itemId = $(target).data('id');
      // 从原生 <select> 中移除对应 option
      $('#mySelect option[value="' + itemId + '"]').remove();
      // 触发 change 通知 Select2 同步状态
      $('#mySelect').trigger('change');
    }
  });
});

⚠️ 注意事项与优化建议

• 禁用内联 onclick：原始代码中使用 onclick="removeItem(...)" 在 Select2 渲染的 DOM 中不可靠（作用域、上下文丢失），应改用事件委托和 data-* 属性传递参数。
• 样式增强（推荐）：为 .remove-button 添加 CSS，提升可用性：

  .remove-button {
    margin-left: 8px;
    color: #e74c3c;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
  }
  .remove-button:hover {
    opacity: 0.8;
  }

• 兼容已选标签（可选）：若还需在已选中的标签（.select2-selection__choice）中显示删除按钮，需额外配置 templateSelection 并监听 select2:unselecting 或使用 closeOnSelect: false 配合自定义逻辑。
• 动态选项场景：若选项由 AJAX 动态加载，确保 formatOption 中的 data-id 始终与 <option></option> 的 value 严格一致，否则 find() 将失效。

该方案无需修改 Select2 源码，完全基于官方事件钩子，兼容 Select2 v4+，稳定可靠，是生产环境推荐的标准实践。