Select2 - 打开下拉列表后形成下拉列表时需要一个事件

Question

我正在使用 select2 jquery 插件

我正在使用

open

事件

var select2 = $('select').select2();
select2.on("select2:open", () => {
   // I want to do some code here with $('.select2-results__option')
   //$('.select2-results__option').size() is not equal to actual elements 
});

当我们单击下拉菜单时会触发此事件。但我在这个事件中没有得到下拉元素。

我有 2000 个下拉元素。但在公开活动中我没有得到这一点。是否有任何事件来检测下拉列表是否已填充。

Answer 1

当我尝试在打开后删除项目时，也遇到了类似的问题。

您可以使用异步函数来检查列表是否完整：

select2.on("open", function (e) {
   asyncCheck();
});

async asyncCheck() {
  // Waiting for 0 milliseconds was enough for me, maybe you need to increase the value
  await new Promise(resolve => window.setTimeout(resolve, 0));

  // Here comes your check, if list is completly populated ...
}

但请注意，此不适用于 IE 11，因为 IE 11 不支持异步和 Promise（请参阅我可以使用中的Promises和异步函数

）

我的 IE 11 解决方法如下所示：

$(document).ready(checkContinuously());

function checkContinuously() {
  // Do your check here
  setTimeout(checkContinuouslyForNullOption, 100);
}

但是它有一个明显的缺点，即总是执行检查，并且理论上可能会导致堆栈溢出，因为它使用递归。

Answer 2

尝试捕获 select2 本身（而不是 DOM）的 'results:all' 事件。

来自 Select2.prototype._registerEvents：

this.on('query', function (params) {
  if (!self.isOpen()) {
    self.trigger('open', {});
  }

  this.dataAdapter.query(params, function (data) {
    self.trigger('results:all', {
      data: data,
      query: params
    });
  });
});

我们可以看到 open 在查询 dataAdapter 之前被触发，那是因为你在它的处理程序中没有选项。

select2.on("results:all", function (args) { console.log(args.data);});

Answer 3

可悲的是

select2:open

事件在加载实际选项之前触发...

但是，您可以像这样创建一个

MutationObserver

(mdn docs)：

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
const observer = new MutationObserver(function (mutations) {
    if (mutations[0].addedNodes.length > 0) {
        document
            .querySelectorAll('.select2-container--open .select2-results__option')
            .forEach(optionRendered => {
                // do something with optionRendered
            });
    }
});
observer.observe(document.querySelector('body'), {
    attributes: false,
    childList: true,
    characterData: false,
    subtree: true
});

您基本上是在检查身体中是否添加了某些东西，如果是，请尝试找到您正在寻找的东西并尝试用它做一些事情。

您可以使用这种方法，例如用于设置渲染选项的样式，而无需实际重新触发

.select2()

。

Answer 4

判断是否有选择的一种方法是

$('#select').find("option").length

提供了选项的数量。

小提琴这里