select2 with closeOnSelect false 在选择时丢失滚动位置

Question

Select2 4.0.3 版：在将 closeOnSelect 设置为 false 的情况下使用大选项列表的多选时，我试图从大列表的中间选择多个选项。每次我选择一个选项时，选择项列表都会滚动回第一个选项。然后我必须向下滚动列表以在我刚刚选择的选项之后找到选项。

有没有办法配置 Select2 以在选择特定选项后保留滚动位置？

Answer 1

这是 select 2 插件的内部问题。

这是在添加以下函数之后发生的回归，highlightFirstItem(); 在选项选择事件上

根据链接， https://github.com/select2/select2/issues/4584

对此的解决方法是在执行此函数之前添加以下条件，

if(!(self.options.get('multiple') && !self.options.get('closeOnSelect'))) {
  self.highlightFirstItem();
}

所以在选择事件（在 select.js 文件中的第 1036 行）变成之前 -

container.on('select', function () {
      if (!container.isOpen()) {
        return;
      }

      self.setClasses();
      self.highlightFirstItem(); 
});

后 -

container.on('select', function () {
      if (!container.isOpen()) {
        return;
      }

      self.setClasses();

      if(!(self.options.get('multiple') && !self.options.get('closeOnSelect'))){
        self.highlightFirstItem();
      } 
});

因此，在突出显示第一个元素之前，即，将滚动重置为顶部，我们正在验证当前 select2 下拉列表是否启用了多选，并且 closeOnSelect 选项未设置为 false，如果其中任何一个为真，则不会调用突出显示第一个选项，因此滚动保留在选项选择上

您必须在 select2.js 库中进行此编辑，因为此修复程序还没有正式的 select2 版本。我使用 select 2 version 4.0.3 进行编辑。

以下是步骤，从https://github.com/select2/select2/tags下载 select2 4.0.3 zip

要缩小源文件（select2.js），请在本地安装 nodejs。

解压文件夹，到dist/js/打开select2.js，替换上面提到的代码中的container.on('select')函数代码。

对于文件缩小（丑化），select2 使用 grunt，因此在命令行上打开提取的 select2-4.0.3 文件夹。

运行以下命令， npm install npm install -g grunt-cli grunt uglify

上面所做的代码更改将移动到 select2-4.0.3/dist/js 文件夹中的 select2.min.js 文件中，您现在可以将其用作项目中的 select2 js 文件

希望这可以帮助

Answer 2

出于显而易见的原因，我不建议降级或修改源代码。开发者表示这个问题将在即将到来的更新中修复。

目前，挂钩到“选择”和“选择”事件工作正常：

$('select[multiple]').select2({
    closeOnSelect: false
})
 .on('select2:selecting', e => $(e.currentTarget).data('scrolltop', $('.select2-results__options').scrollTop()))
 .on('select2:select', e => $('.select2-results__options').scrollTop($(e.currentTarget).data('scrolltop')))