如何为Select2下拉框的每个option添加点击删除图标功能

核心通过Select2自带的自定义渲染能力配合事件委托实现，不需要修改Select2源码：

• 用templateResult配置项自定义下拉选项的渲染结构，在每个选项文本末尾追加删除图标，给图标添加专属类名用于后续事件绑定
• 采用事件委托给动态生成的删除图标绑定点击事件，触发时先阻止事件冒泡，避免点击删除的同时选中对应选项
• 获取当前选项对应的value值，删除原生select节点下的对应option，再触发Select2组件刷新即可同步下拉列表

样式调整 #

首先添加基础样式让删除图标排版更合理：

/* 下拉选项设置为弹性布局，方便删除图标靠右对齐 */
.select2-results__option {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 删除图标基础样式，可根据需求自行调整 */
.select2-delete-option {
  cursor: pointer;
  color: #999;
  font-size: 16px;
  padding: 0 5px;
  line-height: 1;
}
.select2-delete-option:hover {
  color: #f5222d;
}

JS逻辑修改 #

调整原有Select2初始化逻辑，添加自定义渲染和删除事件绑定：

$('.phoneNumbers').select2({
  tags: true,
  // 自定义下拉选项渲染模板
  templateResult: function (option) {
    // 跳过加载状态的默认选项，直接返回原文本
    if (option.loading) return option.text;
    // 构造带删除图标的选项结构，也可替换为自己的图标组件代码
    const renderDom = $(`
      <span class="option-text">${option.text}</span>
      <span class="select2-delete-option">×</span>
    `);
    return renderDom;
  }
});

// 事件委托绑定删除事件，适配动态生成的下拉选项和新增的tag选项
$(document).on('click', '.select2-delete-option', function(e) {
  // 阻止冒泡，避免触发选项选中的默认行为
  e.stopPropagation();
  // 获取当前待删除选项的value值
  const targetOptionData = $(this).closest('.select2-results__option').data('data');
  const targetValue = targetOptionData.id;
  // 移除原生select中对应的option节点
  $(`.phoneNumbers option[value="${targetValue}"]`).remove();
  // 触发Select2组件更新，同步下拉列表内容
  $('.phoneNumbers').trigger('change');
});

可选优化：如果有部分选项不需要支持删除，可给对应option添加自定义属性（比如data-allow-delete="false"），在templateResult渲染时判断属性值，不符合删除条件的选项不输出删除图标即可。

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