Select2清空多选选择器时触发过多事件的问题

问题说明 #

使用Select2实现多选选择器做列表过滤时，单个选项的选择/取消能正常触发change事件重建列表，但点击清空按钮会触发多次change事件（选中n个选项就会触发n+1次），导致列表被重复重建多次。需求是清空操作仅触发一次列表重建，同时保留单个选项移除时select2:unselect的正常触发。

问题原因 #

Select2的清空逻辑是：先触发select2:clearing和select2:clear事件，随后逐个移除每个选中的选项，每个移除动作都会触发select2:unselect和change事件，最后还会额外触发一次change事件，导致多次执行列表重建逻辑。

解决方案 #

通过设置状态标记区分清空操作和单个选项操作，利用select2:clearing标记清空开始，在select2:clear中执行一次清空后的列表重建，同时在change事件中跳过清空过程中触发的重复事件。

修改后的代码示例 #

JavaScript部分

const $field = $("[name=color]");
let isClearing = false; // 标记是否处于清空操作状态

$field.select2({
    closeOnSelect : false,
    placeholder: "Please select",
    allowHtml: true,
    allowClear: true,
    tags: true
});

// 处理列表重建的核心函数
function rebuildList() {
  const selectedValues = $field.val() || [];
  console.log("重建列表，筛选条件：", selectedValues);
  // 此处编写你的列表重建逻辑
}

$field.on("select2:clearing", function(e) {
  isClearing = true; // 标记开始执行清空操作
});

$field.on("select2:clear", function(e) {
  rebuildList(); // 清空时仅执行一次列表重建
});

$field.on("change", function(e) {
  if (isClearing) {
    isClearing = false; // 重置标记，避免影响后续操作
    return; // 跳过清空过程中触发的重复change事件
  }
  rebuildList(); // 单个选项操作时正常执行列表重建
});

$field.on("select2:unselect", function(e) {
  console.log("移除单个选项：", e.params.data.id);
  // 此处可保留单个选项移除时的额外逻辑
});

$field.on("select2:select", function(e) {
  console.log("选择单个选项：", e.params.data.id);
});

HTML部分

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<select class="form-control" style="width: 100%" name="color" multiple>
  <option value="blue">blue</option>
  <option value="red">red</option>
  <option value="yellow">yellow</option>
</select>

效果验证 #

• 点击清空按钮时，控制台仅输出一次列表重建日志，同时select2:unselect仍会为每个被移除的选项触发一次
• 单个选项的选择/取消操作会正常触发change事件执行列表重建

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