Як змінити вибране значення випадаючого меню select2 за допомогою JqGrid?

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

Наприклад, якщо чотири завантажені значення: "Any", "Fruit", "Vegetable", "Meat"та випадаючий список за замовчуванням "Any", як я можу змінити це на "Fruit"події JqGrid loadComplete?

Чи можливо це?

Для select2 версії> = 4.0.0

Інші рішення можуть не працювати, однак наступні приклади повинні працювати.

Рішення 1: викликає запуск усіх приєднаних змін зміни, включаючи select2

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

Рішення 2: спричиняє ДУЖЕ select2 змінити подію

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

Дивіться цю jsfiddle для прикладів таких. Завдяки @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');  

Примітки щодо веб-сайту Select 2 (див. Застарілі та вилучені методи ), які можуть бути корисні для інших:

.select2 ('val') Метод "val" застарілий і буде видалений у Select2 4.1. Застарілий метод більше не включає параметр тригер-зміни.

Натомість слід зателефонувати .val на базовий елемент. Якщо вам знадобився другий параметр (alarmChange), ви також повинні викликати .trigger ("змінити") на елементі.

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

Дивлячись на docs 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 знав, як перетворити ідентифікатор об'єкта, який ви передаєте в 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");

Просто хотів додати другу відповідь. Якщо ви вже надали вибір як select2 , вам знадобиться це відобразити у вашому селекторі наступним чином:

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

У вас є два варіанти - як відповідь @PanPipes, ви можете зробити наступне.

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

Це прийнятне рішення лише в тому випадку, якщо в події зміни не пов'язані спеціальні дії. Я використовую в цій ситуації рішення, щоб викликати конкретну подію select2, яка оновлює вибраний вибір2.

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

Виникли проблеми з налаштуванням параметра String, вибраного в select2:

За допомогою параметра: "параметр 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