Я использую Oleg select2 demo, но мне интересно, можно ли изменить текущее выбранное значение в выпадающем меню.
Например, если четыре загруженных значения были: "Any", "Fruit", "Vegetable", "Meat", а раскрывающийся список по умолчанию - "Any", как бы я мог изменить это на "Fruit" в событии JqGrid loadComplete?
Возможно ли это?
Для версии select2> = 4.0.0
Другие решения могут не работать, однако следующие примеры должны работать.
$('select').val('1').trigger('change');
$('select').val('1').trigger('change.select2');
Посмотрите это jsfiddle для примеров этого. Спасибо @minlare за Решение 2.
Скажем, у меня есть лучший друг с именами людей. Итак, Боб, Билл и Джон (в этом примере я предполагаю, что значение совпадает с именем). Сначала я инициализирую select2 на моем select:
$('#my-best-friend').select2();
Теперь я вручную выбираю Боба в браузере. Затем Боб делает что-то непослушное, и он мне больше не нравится. Таким образом, система отменяет выбор Боба для меня:
$('#my-best-friend').val('').trigger('change');
Или, скажем, я заставляю систему выбирать следующего в списке вместо Боба:
// I have assume you can write code to select the next guy in the list
$('#my-best-friend').val('Bill').trigger('change');
Примечания о веб-сайте Select 2 (см. Устаревшие и удаленные методы), которые могут быть полезны для других:
.select2 ( 'Вал') Метод "val" устарел и будет удален в Select2 4.1. Устаревший метод больше не включает параметр triggerChange.
Вместо этого вы должны напрямую вызвать .val для базового элемента. Если вам нужен второй параметр (triggerChange), вам также следует вызвать .trigger("change") для элемента.
$('select').val('1').trigger('change'); // instead of $('select').select2('val', '1');
Глядя на select2 docs, вы используете ниже, чтобы получить/установить значение.
$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value
@PanPipes указала, что это изменилось для 4.x(перейдите к нему вверх, ниже). val теперь вызывается непосредственно
$("#select").val("CA");
Итак, внутри loadComplete jqGrid вы можете получить любое значение, которое вы ищете, затем установите значение selectbox.
Уведомление из документов
Обратите внимание, что для использования этого метода вы должны определить Функция initSelection в параметрах, поэтому Select2 знает, как преобразуйте id объекта, который вы передаете в val(), в полный объект необходимо сделать выбор. Если вы прикрепляетесь к элементу выбора эта функция уже предусмотрена для вас.
this.$("#yourSelector").select2("data", { id: 1, text: "Some Text" });
это должно помочь.
Это должно быть еще проще.
$("#e1").select2("val", ["View" ,"Modify"]);
Но убедитесь, что значения, которые вы передаете, уже присутствуют в HTMl
Просто хотел добавить второй ответ. Если у вас уже отображено выделение в виде select2, вам нужно будет отобразить это в вашем селекторе следующим образом:
$("#s2id_originalSelectId").select2("val", "value to select");
Если вы хотите добавить новые value='newValue' и text='newLabel', вы должны добавить этот код:
Добавить новый вариант в <select>:
var opt = "<option value='newValue' selected ='selected'>" + newLabel+ " </option>";
$(selLocationID).html(opt);
Триггер <select> изменится на выбранное значение:
$(selLocationID).val('newValue').trigger("change");
У вас есть два варианта: в качестве ответов на ответы @PanPipes вы можете сделать следующее.
$(element).val(val).trigger('change');
Это приемлемое решение, только если у него нет каких-либо пользовательских действий, связанных с событием изменения. Решением, которое я использую в этой ситуации, является запуск специального события select2, которое обновляет выбранный select2.
$(element).val(val).trigger('change.select2');
У некоторых проблем с настройкой параметра String, выбранного в select2:
С опцией: "option string1/option" используется:
$('#select').val("string1").change();
НО с опцией со значением: значение опции "E" string1/option:
$('#select').val("E").change(); // you must enter the Value instead of the string
Надеется, что эта помощь поможет кому-то бороться с той же проблемой.
если вы хотите выбрать одно значение, используйте
$('#select').val(1).change()
если вы хотите выбрать несколько значений, затем установите значение в массиве, чтобы вы могли использовать этот код
$('#select').val([1,2,3]).change()
Для V4 Select2, если вы хотите изменить как значение select2, так и текстовое представление раскрывающегося списка.
var intValueOfFruit = 1;
var selectOption = new Option("Fruit", intValueOfFruit, true, true);
$('#select').append(selectOption).trigger('change');
Это установит не только значение за кулисами, но и текстовое отображение для select2.
Извлечено из https://select2.github.io/announcements-4.0.html#removed-methods
Мой ожидаемый код:
$('#my-select').val('').change();
отлично работает благодаря @PanPipes для полезного.
сделай это
$('select#id').val(selectYear).select2();
если у вас есть источник данных ajax, пожалуйста, обратитесь к этому для ошибок без ошибок
https://select2.org/programmatic-control/add-select-clear-items
//Настройте элемент управления Select2
$('#mySelect2').select2({
ajax: {
url: '/api/students'
}
});
//Извлеките предварительно выбранный элемент и добавьте в элемент управления
var studentSelect = $('#mySelect2');
$.ajax({
type: 'GET',
url: '/api/students/s/' + studentId
}).then(function (data) {
// create the option and append to Select2
var option = new Option(data.full_name, data.id, true, true);
studentSelect.append(option).trigger('change');
// manually trigger the `select2:select` event
studentSelect.trigger({
type: 'select2:select',
params: {
data: data
}
});
});
если вы хотите установить выбранный элемент, когда вы знаете текст из выпадающего списка и не знаете значение, вот пример:
Скажем, вы выяснили часовой пояс и хотите его установить, но в значениях есть time_zone_id.
var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
var $select2 = $('#time-zone');
var selected = $select2.find("option:contains('"+timeZone+"')").val();
$select2.val(selected).trigger('change.select2');
// Set up the Select2 control
$('#mySelect2').select2({
ajax: {
url: '/api/students'
}
});
// Fetch the preselected item, and add to the control
var studentSelect = $('#mySelect2');
$.ajax({
type: 'GET',
url: '/api/students/s/' + studentId
}).then(function (data) {
// create the option and append to Select2
var option = new Option(data.full_name, data.id, true, true);
studentSelect.append(option).trigger('change');
// manually trigger the 'select2:select' event
studentSelect.trigger({
type: 'select2:select',
params: {
data: data
}
});
});
Шрифт: выберите 2 документации
Вы можете просто использовать метод get/set для установки значения
$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value
или вы можете сделать это:
$('#select').val("E").change(); // you must enter the Value instead of the string