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

Я использую Oleg's select2 demo, но мне интересно, можно ли изменить текущее выбранное значение в выпадающем меню.

Например, если бы загружались четыре значения: "Любой", "Фрукты", "Овощи", "Мясо" и в выпадающем списке по умолчанию стоит "Любой", как я смогу изменить его на "Фрукты" в JqGrid событии loadComplete?

Возможно ли это?

Решение

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

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

Решение 1: Причины все добавленные события изменения для запуска, включая select2

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

Решение 2: причины просто select2 изменить событие, чтобы вызвать

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

Видите эту [jsfiddle][1] для примеров этих. Спасибо @minlare для решения 2.

Объяснение:

Скажем, у меня есть лучший друг Выберите с людьми'с именами. Итак, Боб, Билл и Джон (в этом примере я предполагаю, что значение такое же, как имя). Сначала я инициализирую select2 на мой выбор:

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

Заметки на сайте выбрать 2 (см. устарела и удалена методов), что может быть полезным для других:

.select2('вал') В "Вэл" и метод является устаревшим и будет удален в Select2 4.1. Устаревший метод не включает параметр triggerChange.

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

$('select').val('1').trigger('change'); // instead of $('select').select2('val', '1');
Комментарии (14)

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

Комментарии (8)
this.$("#yourSelector").select2("data", { id: 1, text: "Some Text" });

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

Комментарии (1)

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

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

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

Комментарии (0)

Если вы хотите добавить новое значение='значение' " и " text='невлюбчивых'`, вы должны добавить этот код:

  1. Добавить новый параметр в <выбрать>:

ВАР опт = " в<Параметр. Значение='значение' избранные ='избранные'>" в + невлюбчивых+ " и </вариант> и"; $(selLocationID).формате HTML(опт);

  1. Триггер в <выбрать> изменение выбранного значения:

$(selLocationID).функция val('значение').триггер (на"изменить" по);

Комментарии (3)

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

$("#s2id_originalSelectId").select2("val", "value to select");
Комментарии (0)

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

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

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

$(element).val(val).trigger('change.select2');
Комментарии (2)

Имея некоторые проблемы с параметр строку выбрать в select2:

Вариант: "и вариант строка1 /опции" и используется:

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

Но имеет значение: параметр значение на "Е" и строка1 /параметр :

$('#select').val("E").change(); // you must enter the Value instead of the string

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

Комментарии (0)

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

Комментарии (1)

если вы хотите выбрать одно значение, а затем использовать $(&#39;#выберите&#39;).вал(1).изменение()

если вы хотите выбрать несколько значений, то значение в массиве, так что вы можете использовать этот код $(&#39;#выберите&#39;).функция val([1,2,3]).изменение()

Комментарии (1)

сделать это

 $('select#id').val(selectYear).select2();
Комментарии (2)

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

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

прекрасно работает спасибо @свирели для полезных одна.

Комментарии (0)

если у вас есть Аякс источника данных, пожалуйста, обратитесь за ошибки бесплатно

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
        }
    });
});
Комментарии (0)

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

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

Комментарии (0)

вы можете просто использовать командлет 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
Комментарии (0)