如何使用多个自定义Select2选择框？多框场景下JQuery排序代码失效

我之前也碰到过类似的坑！多个Select2实例只最后一个生效，大概率是作用域污染或者没有针对每个实例单独绑定逻辑导致的——比如你可能用了全局变量，循环结束后变量指向最后一个元素，或者事件绑定用了全局选择器，导致所有操作都落到最后一个实例上。

下面给你一步步拆解解决方案，包括完整的代码示例：

问题根源复盘 #

当你直接用$('.select2').select2()初始化多个元素，然后在外面绑定排序事件时，变量（比如存储容器的变量）会被最后一个实例覆盖，事件也会错误地绑定到全局选择器匹配的最后一个元素上。

正确的多实例处理方案 #

核心思路是遍历每个Select2元素，为每个实例创建独立的作用域和逻辑绑定：

1. 先准备HTML结构 #

给所有需要排序的Select2加统一的类名，方便批量处理：

<!-- 第一个Select2标签选择器 -->
<select class="sortable-select2" multiple="multiple" data-tags="true">
  <option selected>前端</option>
  <option selected>JavaScript</option>
</select>

<!-- 第二个Select2标签选择器 -->
<select class="sortable-select2" multiple="multiple" data-tags="true">
  <option selected>后端</option>
  <option selected>Java</option>
</select>

2. 编写jQuery逻辑（包含排序功能） #

这里以拖拽排序为例（结合Sortable.js，比手动写上下按钮更友好），每个实例单独初始化和绑定：

$(document).ready(function() {
  // 遍历每个需要排序的Select2元素
  $('.sortable-select2').each(function() {
    // 缓存当前实例的jQuery对象，确保作用域独立
    const $currentSelect = $(this);
    
    // 1. 初始化当前Select2实例
    $currentSelect.select2({
      tags: true,
      tokenSeparators: [',', ' '],
      placeholder: "添加或拖拽排序标签"
    });
    
    // 2. 获取当前实例的标签容器（Select2渲染后的DOM）
    const $tagsContainer = $currentSelect.next('.select2-container')
      .find('.select2-selection__rendered');
    
    // 3. 给当前实例绑定拖拽排序逻辑
    new Sortable($tagsContainer[0], {
      animation: 150,
      handle: '.select2-selection__choice', // 拖拽的触发区域（标签本身）
      // 拖拽结束后同步原select的选项顺序（关键！否则刷新后会回到原顺序）
      onEnd: function() {
        syncSelectOptions($currentSelect);
      }
    });
    
    // 辅助函数：将排序后的标签同步回原select元素
    function syncSelectOptions($select) {
      const select2Instance = $select.data('select2');
      const sortedTagIds = [];
      
      // 收集排序后的标签ID
      $tagsContainer.find('.select2-selection__choice').each(function() {
        sortedTagIds.push($(this).data('select2-id'));
      });
      
      // 清空原select，按新顺序重新添加选项
      $select.empty();
      sortedTagIds.forEach(tagId => {
        const tagData = select2Instance.data('data')[tagId];
        const option = new Option(tagData.text, tagData.id, true, true);
        $select.append(option);
      });
      
      // 触发change事件，让Select2同步最新状态
      $select.trigger('change');
    }
  });
});

3. 关键注意点 #

• 用.each()遍历每个元素，确保每个实例有自己的$currentSelect变量，避免作用域冲突；
• 事件和排序逻辑都绑定到当前实例的容器上，不会影响其他Select2；
• 必须同步原select的选项顺序——因为Select2的数据完全依赖于原生select元素，只改渲染后的DOM是临时的，刷新就会失效。

如果你不用Sortable.js（手动实现上下移动） #

如果不想引入额外库，也可以给每个标签加上下按钮，绑定点击事件：

// 在each循环内添加：
$tagsContainer.on('click', '.move-up, .move-down', function(e) {
  e.stopPropagation(); // 防止触发Select2的默认事件
  const $currentTag = $(this).closest('.select2-selection__choice');
  
  if ($(this).hasClass('move-up')) {
    const $prevTag = $currentTag.prev();
    if ($prevTag.length) {
      $currentTag.insertBefore($prevTag);
      syncSelectOptions($currentSelect);
    }
  } else if ($(this).hasClass('move-down')) {
    const $nextTag = $currentTag.next();
    if ($nextTag.length) {
      $currentTag.insertAfter($nextTag);
      syncSelectOptions($currentSelect);
    }
  }
});

记得在初始化Select2时，自定义模板给每个标签加上上下按钮：

$currentSelect.select2({
  // ...其他配置
  templateSelection: function(tag) {
    return $(`<span class="select2-selection__choice">
              ${tag.text}
              <button class="move-up">↑</button>
              <button class="move-down">↓</button>
            </span>`);
  }
});

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