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

Ответ 1

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

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

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

Ответ 2

Глядя на 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(), в полный объект необходимо сделать выбор. Если вы прикрепляетесь к элементу выбора эта функция уже предусмотрена для вас.

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

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

• Добавить новый вариант в <select>:

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

• Триггер <select> изменится на выбранное значение:

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

Ответ 7

У вас есть два варианта: в качестве ответов на ответы @PanPipes вы можете сделать следующее.

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

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

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

Ответ 8

У некоторых проблем с настройкой параметра 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

Надеется, что эта помощь поможет кому-то бороться с той же проблемой.

Ответ 9

если вы хотите выбрать одно значение, используйте $('#select').val(1).change()

если вы хотите выбрать несколько значений, затем установите значение в массиве, чтобы вы могли использовать этот код $('#select').val([1,2,3]).change()

Ответ 10

Для 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

Ответ 11

Мой ожидаемый код:

$('#my-select').val('').change();

отлично работает благодаря @PanPipes для полезного.

Ответ 12

сделай это

 $('select#id').val(selectYear).select2();

Ответ 13

если у вас есть источник данных 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
        }
    });
});

Ответ 14

если вы хотите установить выбранный элемент, когда вы знаете текст из выпадающего списка и не знаете значение, вот пример:

Скажем, вы выяснили часовой пояс и хотите его установить, но в значениях есть 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'); 

Ответ 15

// 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 документации

Ответ 16

Вы можете просто использовать метод 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