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（请参见 Can中的Promises和async function我使用

我针对IE 11的解决方法如下：

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

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

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

Answer 2

尝试捕获select2本身（不是DOM）的'结果：全部'事件。

这里来自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
    });
  });
});

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

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

Answer 3

查找是否有选项的一种方法是 $('#select').find("option").length提供了多个选项。

小提琴Here

选择2 - 在打开下拉列表后形成下拉列表时需要一个事件

3 个答案: