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

您错过了CSS类，即 select2 。请添加它。

您必须先将html附加到DOM，然后调用 select2（）函数。

<select class="checklist-input select2 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>

// try with this small change also (optional).
selectInput.val(value);
selectInput.select2();

Answer 2

Select2期望选择已在DOM中。

您的代码（提供）尚未（尚未）添加到DOM中，因此select2不知道在何处添加其元素。

您可以尝试将包装器添加到selectInput并为该包装器指定dropdownParent，但由于select2会尝试在DOM中查找该父项进行更改，因此不太可能起作用。

解决方案：：首先将选择添加到DOM，然后再将其更改为select2。

Select2无法正确呈现

2 个答案: