javascript - Select2 渲染不正确

Question

下面的代码可以完美运行，无需在元素上调用 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>

如果有人以前遇到过这个问题或有任何想法，请告诉我

Answer 1

Select2 期望选择已经在 DOM 中。

您的代码(如提供的)尚未将其添加到 DOM，因此 select2 不知道在哪里添加其元素。

您可以尝试向 selectInput 添加一个包装器，并为该包装器指定 dropdownParent，但它不太可能起作用，因为 select2 会尝试在 DOM 中查找该父级以进行更改。

解决方案:先将 select 添加到 DOM，然后再将其更改为 select2。