jQuery Select2插件下拉菜单重复显示问题求助

问题成因 #

下拉重复叠加显示，是代码中几个常见的配置错误共同导致的，和CSS、JS文件是否正确引入本身无关。

分步修复方案 #

• 移除重复加载的插件JS文件
  当前页面同时引入了select2.full.min.js和select2.min.js两份同版本的插件脚本，重复加载会让插件核心逻辑被重复注册，每执行一次初始化都会生成一套独立的下拉DOM结构，直接造成两个下拉叠加显示。
  正确的引入只需要保留一个插件文件即可：
  • 需要使用AJAX加载、自定义模板等全量能力时，保留select2.full.min.js的引入，删掉select2.min.js的脚本行
  • 只需要基础下拉选择能力时，保留select2.min.js的引入，删掉select2.full.min.js的脚本行
• 清理跨页面复制带来的插件残留DOM
  从其他已运行的页面直接复制HTML代码时，会连带把Select2渲染完成后生成的残留结构一并复制过来，包括：
  • select标签上自动添加的select2-hidden-accessible类、各类data-select2-id属性、tabindex="-1"、aria-hidden="true"等插件运行时才会注入的属性
  • select标签后方嵌套的<span class="select2-container">插件生成的DOM节点
    这些残留结构会和新初始化生成的下拉容器直接叠加，造成重复显示。跨页面复制时只需要保留原生select的结构、原有类名、选项数据即可，所有和Select2渲染相关的属性、DOM全部删除。
• 增加初始化逻辑的防重复校验
  避免因为页面渲染逻辑多次执行初始化代码，导致重复生成下拉结构。可将原有初始化逻辑替换为带校验的版本：

  $(".select2").each(function() {
      const $select = $(this);
      // 已有插件实例时先销毁清理，再重新初始化
      if ($select.data('select2')) {
          $select.select2('destroy');
      }
      $select.select2();
  });
  

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