jQuery select2如何在选择后不关闭

jQuery select2是一个强大的下拉框插件，它可以让用户从下拉列表中选择一个或多个选项。有时候我们希望在用户选择一个选项后，下拉框不会自动关闭，可以继续选择其它选项。这个问题可以通过一些简单的设置来实现。

设置select2的选项

要让select2在选择后保持打开状态，我们需要在初始化select2时设置一个选项。

$("#my-select").select2({
  closeOnSelect: false
});

这里的closeOnSelect选项默认是true，表示在选择后自动关闭下拉框。将它设置成false，就能让下拉框一直保持打开状态。

修改select2源代码

如果以上方法不起作用，可以在select2源代码中进行修改。以select2版本为4.x为例，我们需要修改select2/selection.js文件。

首先找到Select2.Selection构造函数，修改其中的init方法。

Select2.Selection.prototype.init = function () {
  var options = this.options;

  this.$selection
    .on("focus", function (e) {
      options.get("selectionOnFocus") && this.trigger("toggle", e);
    }.bind(this))
    .on("blur", function (e) {
      options.get("selectionOnBlur") && this.trigger("toggle", e);
    }.bind(this))
    .on("keydown", function (e) {
      if (e.which === KEYS.SPACE) {
        e.preventDefault();
        this.trigger("toggle", e);
      }
    }.bind(this))
    .on("click", function (e) {
      e.stopPropagation();
      this.trigger("toggle", e);
    }.bind(this))
    .on("toggle", function(e) {
      if (!this.isInterfaceEnabled()) {
        return;
      }

      if (this.isOpen()) {
        this.close();
      } else {
        this.open();
      }
    }.bind(this))
    .attr("aria-haspopup", "true");
};

在其中添加以下代码，用于检测是否还需要保持下拉框的打开状态。

.on("select2:select", function(e) {
  if (options.get("closeOnSelect")) { return; }
  setTimeout(() => { this.trigger("toggle", {}); }, 0);
}.bind(this))

这里添加了一个select2:select事件监听器，在用户选择选项时触发。如果closeOnSelect选项是false，则会延时一段时间后使用toggle方法来切换下拉框的打开状态。这里使用setTimeout是为了保证select2:select事件完成后再执行toggle方法。

总结

以上两种方法都可以让select2在选择后保持打开状态，具体哪种方法更适合，可以根据实际情况来选择。另外，在修改select2源代码时需要注意，这样做可能会带来一些副作用，比如可能会影响到其它组件的正常使用。因此，在修改源代码前需要做好充分的测试。