时间戳

首页 > 解决方案 > Select2 未正确渲染

javascript - Select2 未正确渲染

问题描述

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

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

标签： javascriptjqueryjquery-select2

解决方案

您错过了 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();

推荐阅读