下面的代码可以完美运行,无需在元素上调用 select2。它添加了所有选项并按应有的方式呈现。
let selectInput = $('<select ' +
'class="checklist-input" ' +
'id="' + inputId + '" ' +
'data-checklist-item-field="' + field + '" ' +
'data-checklist-item-id="' + itemId + '" ' +
(disabled ? 'disabled' : '') +
'>');
$.each(data.summary_input_options, (_, val) => {
selectInput.append(`<option value="${val.value}">${val.value}</option>`);
});
selectInput.val(value);
return selectInput;
但是,第二次我向 jQuery 对象添加 select2 调用时,事情变得很奇怪,并且 select2 大部分时间都无法显示,如果它确实出现了 - 第二次我更改了 select 中的值又消失了。
selectInput.val(value).select2();
看起来 select2 被正确调用,但没有插入 HTML 来呈现选择,因为如下所示,select2 正确地将其辅助功能标签插入到原始选择中:
<select class="checklist-input select2-hidden-accessible" id="checklist-summary-52" data-checklist-item-field="summary" data-checklist-item-id="52" data-select2-id="checklist-summary-52" tabindex="-1" aria-hidden="true">
<option value="Yes" data-select2-id="29">Yes</option>
<option value="No">No</option>
<option value="Maybe">Maybe</option>
</select>
如果有人以前遇到过这个问题或有任何想法,请告诉我
最佳答案
Select2 期望选择已经在 DOM 中。
您的代码(如提供的)尚未将其添加到 DOM,因此 select2 不知道在哪里添加其元素。
您可以尝试向 selectInput 添加一个包装器,并为该包装器指定 dropdownParent,但它不太可能起作用,因为 select2 会尝试在 DOM 中查找该父级以进行更改。
解决方案:先将 select 添加到 DOM,然后再将其更改为 select2。
关于javascript - Select2 渲染不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58499919/