javascript 选择2-打开菜单后形成下拉列表时需要事件

swvgeqrz  于 2023-10-14  发布在  Java
关注(0)|答案(4)|浏览(93)

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

cidc1ykv

cidc1ykv1#

我有一个类似的问题,当我试图删除一个项目后打开。
你可以使用一个函数来检查列表是否完整:

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不支持Promises和Promise(请参阅 Can I Use 中的Promises和Promises函数)。
我的IE 11的解决方案看起来像这样:

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

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

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

nkoocmlb

nkoocmlb2#

尝试捕获select2本身的“results:all”事件(而不是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
    });
  });
});

正如我们所看到的,open是在查询dataAdapter之前触发的,这是因为在它的处理程序I guest中没有选项。

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

sqyvllje3#

不幸的是,select2:open事件在实际选项加载之前就触发了。
但是,您可以像这样创建MutationObservermdn 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()的情况下对呈现选项进行样式化。

a7qyws3x

a7qyws3x4#

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

相关问题