Как изменить выбранное значение выпадающего списка select2 с помощью JqGrid?

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

Например, если загружены четыре значения: "Any", "Fruit", "Vegetable", "Meat"и в раскрывающемся списке по умолчанию указано "Any", как я могу изменить это значение "Fruit"в событии JqGrid loadComplete?

Это возможно?

Для версии select2> = 4.0.0

Другие решения могут не работать, однако следующие примеры должны работать.

Решение 1. Вызывает запуск всех подключенных событий изменения, включая select2.

$('select').val('1').trigger('change');

Решение 2. Вызывает запуск события JUST select2

$('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') Метод "val" устарел и будет удален в Select2 4.1. Устаревший метод больше не включает параметр triggerChange.

Вместо этого вы должны напрямую вызвать .val для базового элемента. Если вам нужен второй параметр (triggerChange), вам также следует вызвать .trigger ("change") для элемента.

$('select').val('1').trigger('change'); // instead of $('select').select2('val', '1');

Глядя на документы select2, вы используете ниже, чтобы получить / установить значение.

$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value

@PanPipes указал, что это изменилось для 4.x (иди и подбрось ему голос ниже). valтеперь вызывается напрямую

$("#select").val("CA");

Таким образом, в пределах loadCompletejqGrid вы можете получить любое значение, которое вы ищете, а затем установить значение selectbox.

Уведомление из документов

Обратите внимание, что для того, чтобы использовать этот метод, вы должны определить функцию initSelection в опциях, чтобы Select2 знал, как преобразовать id объекта, который вы передаете в val (), в полный объект, необходимый для визуализации выделения. Если вы присоединяете к элементу выбора, эта функция уже предусмотрена для вас.

this.$("#yourSelector").select2("data", { id: 1, text: "Some Text" });

это должно помочь

Это должно быть еще проще.

$("#e1").select2("val", ["View" ,"Modify"]);

Но убедитесь, что значения, которые вы передаете, уже присутствуют в HTMl

Если вы хотите добавить новый value='newValue'и text='newLabel', вы должны добавить этот код:

1. Добавить новую опцию к <select>:

   var opt = "<option value='newValue' selected ='selected'>" + newLabel+ " </option>";
   $(selLocationID).html(opt);

2. Триггер <select>изменения на выбранное значение:

   $(selLocationID).val('newValue').trigger("change");

Просто хотел добавить второй ответ. Если вы уже представили select как select2 , вам нужно будет отразить это в вашем селекторе следующим образом:

$("#s2id_originalSelectId").select2("val", "value to select");

У вас есть два варианта - как говорится в ответе @PanPipes, вы можете сделать следующее.

$(element).val(val).trigger('change');

Это приемлемое решение, только если нет никаких пользовательских действий, связанных с событием изменения. Решение, которое я использую в этой ситуации, состоит в том, чтобы вызвать конкретное событие select2, которое обновляет отображаемый выбор select2.

$(element).val(val).trigger('change.select2');

Возникли проблемы с настройкой параметра String, выбранного в select2:

С опцией: «опция string1 / option» используется:

$('#select').val("string1").change(); 

НО с опцией со значением: значение опции "E" строка1 / опция:

$('#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