如何解决Select2打开后选择所有元素
我有select2,并且需要document.querySelector在打开后将select2的所有项全部删除。 我无法在打开之前选择它们,因为单击之前不会生成包含项目的容器。 我所有的select2项目都具有class select2-item。 我正在尝试使用.on(“ select2:opening”)处理此问题,但是我的变量中没有数据。
$("#select").on("select2:opening",function(){
selectAllItems();
});
function selectAllItems(){
const items = document.querySelectorAll(".select2-item");
console.log(items);
console.log(JSON.stringify(items));
}
输出为
NodeList []
length: 0
{}
Select2的版本为4.0.5。
解决方法
基于您希望获得所有<li>
项的评论,通常会在selectAllItems()
函数内执行此操作,因为动态生成的列表包含在具有以下内容的<span>
元素中类.select2-container
。
const items = $('.select2-container li');
但是,如果您在select2:opening
事件上立即调用此函数,则该列表尚未生成。相反,您可以设置非常小的延迟,例如 100 ms ,这将为生成列表提供足够的时间,然后您可以选择其中的项目。这应该为您工作:
function selectAllItems() {
const items = $('.select2-container li');
console.log('items',items);
}
$(function() {
$('#select').select2();
$('#select').on('select2:opening',function (e) {
setTimeout(selectAllItems,100);
});
});
我尝试在没有超时的情况下使用select2:open
事件,但是生成了一个<li>
来加载错误的结果。不过,使用select2:open
并具有相同的100毫秒超时确实可以工作。
我要说的是,直接处理列表项是不寻常的-select2允许您处理原始的<select>
列表和<option>
元素,这是您应该努力进行交互的方法用。上面的代码可以满足您的要求,但是除非您有非常具体的理由,否则我不会单独处理那些<li>
DOM元素。
尝试以下
eq(variables['RunPipeline'],'True')
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。