Я использую awesome select2, чтобы создать комбинацию с несколькими выделениями.
Я хотел бы программно выбирать значения по умолчанию (как в тех случаях, когда пользователь сделал ранее), но я не знаю, как это сделать. Я читал, что использование initSelection делает трюк, но это вызывается при создании комбо, и я не хочу, чтобы этот выбор по умолчанию всегда выполнялся.
правильное решение в версии 4.x на примере:
$('#element').val(['val1','val2']).trigger('change');
см.: Описание создателя
Я нашел некоторые решения, возможно, это поможет вам:
$('#el').select2({...}) // init select2
var defaultData = [{id:1, text:'Item1'},{id:2,text:'Item2'},{id:3,text:'Item3'}];
$('#el').data().select2.updateSelection(defaultData);
На странице документации:
" val - возвращает или задает выбор. Если параметр значения не указан, возвращается атрибут id текущего выбранного элемента. Если задан параметр значения, он станет текущим выбором."
Кроме того, из документов:
$("#e8").select2("val", "CA");
Как указано в документации здесь, вы можете просто добавить "опции" в свою разметку выбора, чтобы предварительно выбрать начальные значения по умолчанию.
<select class="js-data-example-ajax">
<option value="3620194" selected="selected">select2/select2</option>
</select>
$('#el').select2().val(['val1','val2']).trigger("change")
делает трюк, но по некоторым причинам он удаляет возможность добавить свой собственный тег...
Я зациклился на массиве значений. Затем задайте каждый параметр, который соответствует ( "selected", true)
values = [2, 5, 3]
for val in values
$("#selects_id option[value="+val+"]").prop("selected",true).trigger("change")
Вы также можете сделать с результатами, полученными от вызова Ajax.
Следующий код работает нормально, но select2 необходимо обновить
$('#el').data().select2.updateSelection(defaultData);
Чтобы продолжить, ответьте @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>
JS
$('.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>
JS
$('.select2').select2();
var defaultData = [{id:1, text:'One'},{id:2,text:'Two'}];
$('.select2').data().select2.updateSelection(defaultData);
Результаты
Наконец-то выдумал!
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, чтобы я мог сохранить измененный список.
Любые идеи?
Лучший ответ и учебник, который мне помог, находится в этом учебнике https://www.skillbooker.com/tutorials/dynamically-populate-with-ajax-a-chosenjs-or-select2js-styled-multi-select-drop-down__1553694731
Здесь вы можете найти решение с автозавершением, множественный выбор раскрывающегося списка с помощью JQuery Select2.
Привязывает данные к элементу "select" HTML, который затем перебирается функциями "Select2", чтобы преобразовать его в красивый раскрывающийся список с несколькими выборами.
Он может хорошо работать с AJax и обязательно попытается в ближайшие дни.