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


178

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

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

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

Ответы:


407

Для версии 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');

8
Это правильный ответ: он работает как в монофоническом, так и в мультиселектах
Джованни Ди Милия,

4
Это приемлемое решение, только если к changeсобытию не привязаны никакие пользовательские действия (например, перезагрузка формы). В противном случае эти действия будут вызваны избыточно при срабатывании change().
van_folmert

Если это работает неправильно, добавьте setTimeout: setTimeout (function () {$ ("select"). Val ("1"). Trigger ("change");}, 1000);
Абель

@van_folmert У меня та же проблема. В идеале я хочу изменить то, что показывается как выбранное, не onChange
вызывая

1
Смотрите мой ответ ниже для примера того, как решить проблему
@van_folmert

135

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


Не похоже на работу с демонстрацией, на которую я смотрю. Не уверен, почему, это может быть связано с тем, как он подключается к JqGrid.
Адам К Дин

1
Обновил ответ. Похоже, вам придется вручную добавить эту функцию в инициализацию select2, чтобы она знала, как обрабатывать valвызов.
Джек,

1
@AdamKDean: Можно дополнительно проверить, был ли <select>преобразован в select2элемент управления, проверяя существование класса select2-offscreenна <select>. Все элементы панели инструментов поиска имеют идентификатор, который начинается с gs_префикса и имеет имя как в colModel. Вы можете использовать, getGridParamчтобы получить colModel.
Олег

Спасибо, мне удалось получить информацию о фильтре, мне просто нужен способ установить ее после того, как панель фильтров воссоздается с помощью select2select. Сегодня я еще раз посмотрю, может, со свежими глазами, я могу это исправить. Еще раз спасибо. Обновление: завершение кода в булевой проверке устранило проблему, с которой я столкнулся, хотя он перестал обновлять панель поиска, а не снова выбирал предыдущий элемент.
Адам К Дин

1
Сейчас не рекомендуется: github.com/select2/select2/blob/master/dist/js/…
Андрей

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

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


3
Пример с несколькими значениями: this. $ ("# YourSelector"). Select2 ("data", [{id: 1, text: "Some Text"}, {id: 2, text: "Some Other Text"}]);
RodneyRd

18

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

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

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


17

Если вы хотите добавить новый 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");

Я считаю, что это чище, чем возиться с «данными» select2 :) Измените dom, позвольте select2 разобраться с остальными.
Paulj

Я тестирую Safari, и это единственное решение, которое действительно работает. Другие более красноречивы, и я бы предпочел их, но больше всего я предпочитаю рабочий код. И это все. :)
Дэвид

Спасибо за это миллион! Я работаю с полями выбора 2, где оба поля заполнены Ajax, и я использовал дополнительные свойства данных для первого поля, чтобы установить значение второго, используя это. Еще раз спасибо!!!!
Сэм

16

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

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

12

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

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

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

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

Да, это лучшее универсальное решение. Действительно, я думаю, что Select2 должен автоматически инициировать внутреннее событие 'change.select2', чтобы обновить отображение при изменении значения. Но это, по крайней мере, обеспечивает простой способ обновить отображение, чтобы оно соответствовало новому значению, не вызывая пользовательских обработчиков событий изменения.
DaveInMaine

this '$ (element) .val (val) .trigger (' change.select2 ');' работал на меня. Спасибо, @minlare.
Рэй

9

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

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

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

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

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

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


5

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

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


это не будет работать, если вы введете строку в квадратных скобках.
Уткарш Пандей

5

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


Попробуйте вызвать («change.select2»). Trigger («select2: select»); если просто изменить не достаточно
Тебе


4

сделай это

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

Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, почему и / или как этот код отвечает на вопрос, повышает его долгосрочную ценность.
rollstuhlfahrer

У меня нет знаний о JqGrid, но с помощью этого кода вы можете изменить значение select2 простым способом
Jaskaran singh Rajal

2

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

1

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

Скажем, вы выяснили часовой пояс и хотите его установить, но 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
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.