Select2 неправильно рендерится - PullRequest
Новая
       55

Select2 неправильно рендерится

0 голосов
/ 22 октября 2019

Приведенный ниже код отлично работает без вызова 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;

Однако, во-вторых, когда я добавляю вызов select2 к объекту jQuery, все становится странным, и 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>

Если кто-то сталкивался с этой проблемой ранее или есть какие-либо идеи, пожалуйста, сообщите мне

Ответы [ 2 ]

1 голос
/ 22 октября 2019

Select2 ожидает, что выбор уже будет в DOM.

Ваш код (как предусмотрено) еще не добавляет его в DOM, поэтому select2 не знает, куда добавить его элементы.

Вы можете попытаться добавить оболочку для selectInput и указать dropdownParent для этой оболочки, но это вряд ли сработает, так как select2 попытается найти этого родителя в DOM и внести изменения.

Решение: Сначала добавьте select в DOM, прежде чем изменить его на select2.

1 голос
/ 22 октября 2019

Вы пропустили класс 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();
...