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事件（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，如果其中任何一个为true，则突出显示第一个选项不是调用，因此滚动保留在选项选择

上

你必须在select2.js库中进行编辑，因为还没有正式的select2版本。我使用了select 2版本4.0.3进行编辑。

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

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

解压缩文件夹，转到dist / js / 打开select2.js并替换上面提到的代码中的container.on（＆＃39; select＆＃39;）功能代码。

对于文件缩小（uglification），select2使用grunt，所以在命令行上打开提取的select2-4.0.3文件夹。

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

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

希望这有帮助

Answer 2

出于明显的原因，我不建议降级或修改源代码。开发人员已声明此problem will be fixed in the upcoming update。

暂时，钩住“ selecting”和“ select”事件可以正常工作：

$('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')))

Answer 3

看到此评论后：

https://github.com/select2/select2/issues/4417#issuecomment-256575280

我也从4.0.3降级到4.0.2并且已经修复了。

Answer 4

在Select2版本3.4.8中，可以通过在第2933行中注释this.updateResults（）来解决。有关更多详细信息，请参见下面的代码

之前

// multi
    onSelect: function (data, options) {

        if (!this.triggerSelect(data)) { return; }

        this.addSelectedChoice(data);

        this.opts.element.trigger({ type: "selected", val: this.id(data), choice: data });

        // keep track of the search's value before it gets cleared
        this.nextSearchTerm = this.opts.nextSearchTerm(data, this.search.val());

        this.clearSearch();
        this.updateResults();

        if (this.select || !this.opts.closeOnSelect) this.postprocessResults(data, false, this.opts.closeOnSelect===true);
      ----
      ----
      ---- 
      ----
      ----

之后

// multi
    onSelect: function (data, options) {

        if (!this.triggerSelect(data)) { return; }

        this.addSelectedChoice(data);

        this.opts.element.trigger({ type: "selected", val: this.id(data), choice: data });

        // keep track of the search's value before it gets cleared
        this.nextSearchTerm = this.opts.nextSearchTerm(data, this.search.val());

        this.clearSearch();
        //this.updateResults(); // comment this line to prevent scroll top scroll bar

        if (this.select || !this.opts.closeOnSelect) this.postprocessResults(data, false, this.opts.closeOnSelect===true);
      ----
      ----
      ---- 
      ----
      ----

select2 with closeOnSelect false在select上失去滚动位置

4 个答案: