Инициализировать динамически добавленный select2 - PullRequest
Новая
       7

Инициализировать динамически добавленный select2

0 голосов
/ 14 сентября 2018

Я добавил select2 динамически, но он не будет инициализирован.Я попытался с помощью следующего кода (найден на самом стеке потока), но он не будет работать, пожалуйста, проверьте мою скрипку для кода.Подскажите, что я пропустил в коде.Заранее спасибо

Проверьте это 

function initializeSelect2(selectElementObj) {
    selectElementObj.select2({
        tags: true
    });
}

$(".select-to-select2").each(function() {
    initializeSelect2($(this));
});

1 Ответ

0 голосов
/ 14 сентября 2018

Некоторые проблемы с предоставленным примером:

  • select2 уже применялся ко всем .select2 выпадающим без каких-либо параметров с этой строкой: $('.select2').select2();
  • $(".select-to-select2").each ничего не делает, потому что с классом select-to-select2 нет выпадающих меню. (Кроме того, each не требуется, вы можете просто передать $(".select-to-select2") в initializeSelect2.)
  • Строка, добавляемая к wrapper, не является допустимым HTML. Эта последняя ссылка «удалить» должна быть заключена в оболочку .row div.
  • id s должен быть уникальным для страницы. После добавления большего количества одинаковых точных выпадающих списков у них были те же идентификаторы / имена, что и у предыдущих, так что это могло привести к непредсказуемому поведению (старые выпадающие списки могли потерять свой select2, и только новые получат его). Например. Вы не можете иметь более одного элемента с id="pgm_que_ans1", следующий должен быть другим.
  • в этом вызове initializeSelect2(wrapper), wrapper не указывает, какие выпадающие списки применить, выберите 2 на: лучше сохранить новый HTML-код в переменную (например, var $newSelects('html here');, и после добавления в DOM , передайте только .select2 с в пределах этого initializeSelect2, например, wrapper.append($newSelects); initializeSelect2($newSelects.find('.select2'))

Вот демонстрация со всем, что собрано вместе:

http://jsfiddle.net/qw3y821g/1/

...