Question

我正在使用bootstrap select2来提供可搜索的下拉列表。数据是动态填充的。我想在所有li元素上有一个自定义属性：

 $('#myselect').select2({
      data: myDataArray
 });

这完美无缺，并呈现以下html：

<ul class="select2-results__options" role="tree" id="select2-myselect-results" aria-expanded="true" aria-hidden="false">
    <li class="select2-results__option" role="treeitem" aria-selected="false">item1</li>
    <li class="select2-results__option" role="treeitem" aria-selected="false">item2</li>
     <!-- etc, total of 77 items listed --> 
</ul>

在所有列表元素上，我想要一个属性。所以我想通了，我必须抓住＆＃39; select2：open＆＃39;元素已经渲染时的事件，然后使用jquery：

应用属性

 $("#myselect").on("select2:open", function () {
     console.log('open');
     var liElements = $('#select2-myselect-results li');
     console.log(liElements.length);
     liElements.attr('data-mydata', 'mydataa');
 });

事件正常触发。控制台显示首次打开：

open
1

控制台显示第二次打开，似乎jquery选择器正在工作：（但为什么只有2次......？，无论如何）

open
77

li元素在任何一种情况下都没有data-mydata属性的主要问题是我的目标。 副问题是为什么第一个开放只有一个元素（即使零也会有更多意义......）

控制台上没有错误消息

Answer 1

我发现它：必须等待DOM事件完成。我认为这个想法对于类似的案例很有用。使用setTimeout技巧（带0）在浏览器消息循环的下一次迭代中执行代码。

在实践中：

$("#myselect").on("select2:open", function () {
    setTimeout(function () {
        var liElements = $('#select2-myselect-results li');
        console.log(liElements.length);
        liElements.attr('data-mydata', 'mydataa');
    }, 0);
});

事件正常触发。控制台显示首次打开：

open
76

...属性就在那里。

PS：这解释了一个侧面问题：为什么第一次是第一次，第二次是77次？因为那是DOM变化之前的状态。第二次77是第一次开放的剩余，可能被删除以创建新的。

所以我们等一下，然后在创建新属性上应用属性......

如何为bootstrap select2 li项添加自定义属性？

1 个答案: