如何为Select2选中选项添加自定义类added-to-select-multiple

嘿，这个需求很好实现！我们可以借助Select2内置的事件监听机制，在用户选中下拉选项的瞬间给主<select>元素加上目标类。具体做法如下：

1. 先完成Select2的基础初始化 #

首先确保你已经引入了jQuery和Select2的CSS、JS文件，然后初始化你的多选Select2组件：

$(document).ready(function() {
  // 初始化Select2
  $('#myselect2').select2();
});

2. 绑定select:select事件监听选中动作 #

Select2提供了select:select事件，当用户从下拉列表里选中任意一个选项时，这个事件就会触发。我们在事件回调里直接给原生的<select>元素添加自定义类added-to-select-multiple即可：

$(document).ready(function() {
  $('#myselect2')
    .select2()
    .on('select:select', function() {
      // 给主select元素添加目标类
      $(this).addClass('added-to-select-multiple');
    });
});

可选优化：仅第一次选中时添加类 #

如果你只希望在用户第一次选中选项时添加这个类（避免重复执行添加操作），可以加个简单的判断：

$(document).ready(function() {
  $('#myselect2')
    .select2()
    .on('select:select', function() {
      const $selectElement = $(this);
      // 检查是否已经有目标类，没有才添加
      if (!$selectElement.hasClass('added-to-select-multiple')) {
        $selectElement.addClass('added-to-select-multiple');
      }
    });
});

额外拓展：移除选项时同步移除类 #

如果需要在用户把所有选中的选项都移除后，同步去掉这个自定义类，可以再绑定select:unselect事件：

$(document).ready(function() {
  const $select = $('#myselect2').select2();

  // 选中选项时添加类
  $select.on('select:select', function() {
    $(this).addClass('added-to-select-multiple');
  });

  // 移除选项时，若没有选中项则移除类
  $select.on('select:unselect', function() {
    if ($(this).val().length === 0) {
      $(this).removeClass('added-to-select-multiple');
    }
  });
});

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