Select2: выбор по умолчанию в нескольких вариантах с помощью AJAX

Я использую awesome select2, чтобы создать комбинацию с несколькими выделениями.

Я хотел бы программно выбирать значения по умолчанию (как в тех случаях, когда пользователь сделал ранее), но я не знаю, как это сделать. Я читал, что использование initSelection делает трюк, но это вызывается при создании комбо, и я не хочу, чтобы этот выбор по умолчанию всегда выполнялся.

Ответы

Ответ 1

правильное решение в версии 4.x на примере:

$('#element').val(['val1','val2']).trigger('change');

см.: Описание создателя

Ответ 2

Я нашел некоторые решения, возможно, это поможет вам:

$('#el').select2({...}) // init select2

var defaultData = [{id:1, text:'Item1'},{id:2,text:'Item2'},{id:3,text:'Item3'}];

$('#el').data().select2.updateSelection(defaultData);

Ответ 3

На странице документации:

" val - возвращает или задает выбор. Если параметр значения не указан, возвращается атрибут id текущего выбранного элемента. Если задан параметр значения, он станет текущим выбором."

Кроме того, из документов:

$("#e8").select2("val", "CA");

Ответ 4

Как указано в документации здесь, вы можете просто добавить "опции" в свою разметку выбора, чтобы предварительно выбрать начальные значения по умолчанию.

<select class="js-data-example-ajax">
  <option value="3620194" selected="selected">select2/select2</option>
</select>

Ответ 5

$('#el').select2().val(['val1','val2']).trigger("change")

делает трюк, но по некоторым причинам он удаляет возможность добавить свой собственный тег...

Ответ 6

Я зациклился на массиве значений. Затем задайте каждый параметр, который соответствует ( "selected", true)

values = [2, 5, 3]

for val in values
  $("#selects_id option[value="+val+"]").prop("selected",true).trigger("change")

Вы также можете сделать с результатами, полученными от вызова Ajax.

Ответ 7

Следующий код работает нормально, но select2 необходимо обновить

$('#el').data().select2.updateSelection(defaultData);

Ответ 8

Чтобы продолжить, ответьте @sanj. Кажется, это работает для меня в моих проектах.

Через HTML

HTML

<select class="select2" style='width:100%;' multiple>
    <option val=''>Please choose</option>
    <option val="1" selected>One</option>
    <option val="2" selected>Two</option>
    <option val="3">Three</option>
</select>

$('.select2').select2();

Результаты

Через Javascript

HTML

<select class="select2" style='width:100%;' multiple>
    <option val=''>Please choose</option>
    <option val="1">One</option>
    <option val="2">Two</option>
    <option val="3">Three</option>
</select>

$('.select2').select2();
var defaultData = [{id:1, text:'One'},{id:2,text:'Two'}];
$('.select2').data().select2.updateSelection(defaultData);

Результаты

Ответ 9

Наконец-то выдумал! Select2 выполняет итерацию с помощью тега <option> под <select>.

<select class="js-data-example-ajax" style="width:100%">
  <option value="3620194" selected="selected">Put the pre-selected options here</option>
</select>

Внутренний html <option> помещается в объект репо под текстовым ключом. Поэтому repo.text даст innerhtml. То есть, все, что нам нужно сделать, это предоставить repo.text опции formatSelection в init. Кроме того, json, передаваемый из сервлета (контроллера), должен иметь желаемый текст метки, помещенный под клавишей text! Все еще выясняется, как добавлять атрибуты к созданным элементам li, чтобы я мог сохранить измененный список. Любые идеи?

Ответ 10

Лучший ответ и учебник, который мне помог, находится в этом учебнике https://www.skillbooker.com/tutorials/dynamically-populate-with-ajax-a-chosenjs-or-select2js-styled-multi-select-drop-down__1553694731

Ответ 11

Здесь вы можете найти решение с автозавершением, множественный выбор раскрывающегося списка с помощью JQuery Select2.

Привязывает данные к элементу "select" HTML, который затем перебирается функциями "Select2", чтобы преобразовать его в красивый раскрывающийся список с несколькими выборами.

Он может хорошо работать с AJax и обязательно попытается в ближайшие дни.