Jak zmienić wybraną wartość listy rozwijanej select2 za pomocą JqGrid?

Korzystam z wersji demo select2 Olega , ale zastanawiam się, czy można zmienić aktualnie wybraną wartość w menu rozwijanym.

Na przykład, jeśli cztery załadowane wartości to: "Any", "Fruit", "Vegetable", "Meat"a domyślnie lista rozwijana to "Any", jak mógłbym to zmienić "Fruit"w zdarzeniu JqGrid loadComplete?

czy to możliwe?

Dla wersji select2> = 4.0.0

Inne rozwiązania mogą nie działać, jednak poniższe przykłady powinny działać.

Rozwiązanie 1: Powoduje wyzwolenie wszystkich dołączonych zdarzeń zmiany, w tym select2

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

Rozwiązanie 2: Powoduje wyzwolenie zdarzenia zmiany JUST select2

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

Zobacz tego jsfiddle dla przykładów. Dzięki @minlare dla Solution 2.

Wyjaśnienie:

Powiedzmy, że mam najlepszego przyjaciela z nazwiskami osób. Więc Bob, Bill i John (w tym przykładzie zakładam, że wartość jest taka sama jak nazwa). Najpierw inicjuję select2 w moim select:

$('#my-best-friend').select2();

Teraz ręcznie wybieram Boba w przeglądarce. Następnie Bob robi coś niegrzecznego i już go nie lubię. Dlatego system odznacza dla mnie Boba:

$('#my-best-friend').val('').trigger('change');

Lub powiedz, że każę systemowi wybrać następny z listy zamiast Boba:

// I have assume you can write code to select the next guy in the list
$('#my-best-friend').val('Bill').trigger('change');  

Uwagi na temat witryny Select 2 (patrz Przestarzałe i usunięte metody ), które mogą być przydatne dla innych:

.select2 („val”) Metoda „val” została uznana za przestarzałą i zostanie usunięta w Select2 4.1. Przestarzała metoda nie zawiera już parametru triggerChange.

Zamiast tego powinieneś bezpośrednio wywołać .val na podstawowym elemencie. Jeśli potrzebujesz drugiego parametru (triggerChange), powinieneś także wywołać .trigger („zmiana”) na elemencie.

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

Patrząc na dokumenty select2, których używasz poniżej, aby uzyskać / ustawić wartość.

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

@PanPipes zwrócił uwagę, że zmieniło się to w wersji 4.x (rzuć mu głos poniżej). valjest teraz nazywany bezpośrednio

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

Więc w ramach loadCompletejqGrid możesz uzyskać dowolną wartość, której szukasz, a następnie ustawić wartość pola wyboru.

Powiadomienie z dokumentów

Zauważ, że aby użyć tej metody, musisz zdefiniować funkcję initSelection w opcjach, aby Select2 wiedział, jak przekształcić identyfikator obiektu przekazywanego przez val () w pełny obiekt, który musi wyświetlić. Jeśli dołączasz do wybranego elementu, ta funkcja jest już dostępna.

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

to powinno pomóc.

To powinno być jeszcze łatwiejsze.

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

Ale upewnij się, że przekazywane wartości są już obecne w HTMl

Jeśli chcesz dodać nowy value='newValue'i text='newLabel', powinieneś dodać ten kod:

1. Dodaj nową opcję do <select>:

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

2. Wyzwól <select>zmianę na wybraną wartość:

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

Chciałem tylko dodać drugą odpowiedź. Jeśli wybrałeś już opcję select jako select2 , musisz mieć ją odzwierciedloną w selektorze w następujący sposób:

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

Masz dwie opcje - ponieważ odpowiedź @PanPipes stwierdza, że ​​możesz wykonać następujące czynności.

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

Jest to akceptowalne rozwiązanie tylko wtedy, gdy nie ma żadnych niestandardowych działań powiązanych ze zdarzeniem zmiany. Rozwiązaniem, którego używam w tej sytuacji, jest wywołanie określonego zdarzenia select2, które aktualizuje wyświetlany wybór select2.

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

Problemy z ustawieniem opcji String wybranej w select2:

Z opcją: „ciąg opcji 1 / opcja” zastosowany:

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

ALE z opcją o wartości: wartość opcji „E” string1 / opcja:

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

Ma nadzieję, że pomoże to komuś, kto zmaga się z tym samym problemem.

jeśli chcesz wybrać pojedynczą wartość, użyj $('#select').val(1).change()

jeśli chcesz wybrać wiele wartości, ustaw wartość w tablicy, abyś mógł użyć tego kodu $('#select').val([1,2,3]).change()

W przypadku V4 Select2, jeśli chcesz zmienić zarówno wartość select2, jak i tekstową reprezentację menu rozwijanego.

var intValueOfFruit = 1;
var selectOption = new Option("Fruit", intValueOfFruit, true, true);
$('#select').append(selectOption).trigger('change');

Spowoduje to ustawienie nie tylko wartości za scenami, ale także wyświetlania tekstu dla select2.

Pobrano z https://select2.github.io/announcements-4.0.html#removed-methods

Mój oczekiwany kod:

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

działa idealnie dzięki @PanPipes za przydatny.

Zrób to

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

jeśli masz źródło danych ajax, zapoznaj się z nim, aby znaleźć błędy

https://select2.org/programmatic-control/add-select-clear-items

// Skonfiguruj formant Select2

$('#mySelect2').select2({
    ajax: {
        url: '/api/students'
    }
});

// Pobierz wstępnie wybrany element i dodaj do kontrolki

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
        }
    });
});

jeśli chcesz ustawić wybrany element, gdy znasz tekst z listy rozwijanej i nie znasz wartości, oto przykład:

Powiedzmy, że wymyśliłeś strefę czasową i chcesz ją ustawić, ale mają time_zone_idw sobie wartości .

        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
        }
    });
});

Czcionka: wybierz 2 dokumenty

możesz po prostu użyć metody get / set do ustawienia wartości

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

lub możesz to zrobić:

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