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

Select2 - need a event when drop down list is formed after opening the dropdown

本文关键字：下拉列表 一个 事件 Select2-      更新时间：2023-09-26

我正在使用select2jquery插件

我正在使用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个下拉元素。但在公开赛中我不明白。是否有任何事件可以检测下拉列表是否已填充。

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

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

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);
}

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

尝试捕获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之前触发的，这是因为在它的处理程序I guest中没有选项。

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

查找是否有选项的一种方法是CCD_ 2，它提供了选项的数量。

Fiddle Here

相关文章：