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

Posted 2023-05-07

【中文标题】Select2 - 打开下拉列表后形成下拉列表时需要一个事件

【英文标题】：Select2 - need a event when drop down list is formed after opening the dropdown

【发布时间】：2016-12-08 23:48:37

【问题描述】：

我正在使用 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 个下拉元素。但在公开活动中，我没有得到。是否有任何事件检测下拉列表是否已填充。

【问题讨论】：

如果你只是想获取元素 -***.com/questions/16187672/…

@rashleighp 我没有使用query，我还需要open event之后的元素

【参考方案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 I Use 中的 Promises 和 async function em>

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

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

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

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

【参考方案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););

【讨论】：

我想对open事件中的$('.select2-results__option')元素做一些操作。我在select:open 事件中得到了数据，但没有得到$('.select2-results__option') 元素

【参考方案3】：

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

小提琴Here

【讨论】：

@murli2308 添加了小提琴

不回答问题。