如何在Select2多选组件中仅允许清除特定选项

核心逻辑 #

通过DOM操作隐藏指定选中项的删除按钮，同时拦截select2:unselecting事件，阻止非目标选项的删除操作，兼顾视觉和功能层面的限制。

具体实现步骤 #

1. 初始化并预设选中项 #

先正常初始化多选模式的Select2组件，并设置预先选中的选项：

// 替换成你的select元素ID或选择器
const $select = $('#multi-select');

$select.select2({
  multiple: true,
  placeholder: '请选择选项',
  // 其他自定义配置
}).val(['item1', 'item2', 'item3']).trigger('change');

2. 隐藏非目标项的删除按钮 #

Select2选中项的删除按钮对应类名是select2-selection__choice__remove，我们遍历所有选中项，隐藏item1和item2的删除按钮：

function hideUnremovableChoices() {
  $select.next('.select2-container')
    .find('.select2-selection__choice')
    .each(function() {
      // 去掉末尾的删除按钮文本，获取选项真实文本
      const choiceText = $(this).text().replace(/×$/, '').trim();
      if (choiceText === 'item1' || choiceText === 'item2') {
        $(this).find('.select2-selection__choice__remove').hide();
      }
    });
}

// 初始化后立即执行
hideUnremovableChoices();

3. 拦截非目标项的删除事件 #

仅隐藏按钮无法阻止键盘退格删除，需要通过select2:unselecting事件阻止非允许项的删除：

$select.on('select2:unselecting', function(e) {
  const targetValue = e.params.args.data.id;
  // 禁止删除item1和item2
  if (['item1', 'item2'].includes(targetValue)) {
    e.preventDefault();
  }
});

4. 适配动态更新场景 #

如果组件会动态渲染（比如重新加载选项、新增选中项），需要在渲染完成后重新执行隐藏逻辑：

$select.on('select2:rendered', hideUnremovableChoices);

内容的提问来源于stack exchange，提问作者EL MAHDI BOUZKOURA