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

178

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?

Adam K. Dean
źródło

Odpowiedzi:

407

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');
PanPipes
źródło
8
Oto poprawna odpowiedź: działa zarówno w trybie mono-select, jak i multi-select
Giovanni Di Milia
4
Jest to akceptowalne rozwiązanie tylko wtedy, gdy nie ma żadnych niestandardowych działań powiązanych ze changezdarzeniem (takich jak przeładowanie formularza). W przeciwnym razie działania te byłyby wywoływane zbędnie po uruchomieniu change().
van_folmert
Jeśli to nie działa poprawnie, dodaj setTimeout: setTimeout (function () {$ („select”). Val („1”). Trigger („change”);}, 1000);
Abel,
@van_folmert Mam ten sam problem. Idealnie, chcę zmienić to, co pokazane jest jako wybrane, bez odpalenia wydarzenia (ponieważ mam do tego niestandardowe onChange)
onebree
1
Zobacz moją odpowiedź poniżej, aby rozwiązać problem
@van_folmert
135

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.

Jacek
źródło
Wygląda na to, że nie działa z wersją demonstracyjną, na którą patrzę. Nie jestem pewien, dlaczego może to mieć związek ze sposobem, w jaki podłącza się do JqGrid.
Adam K Dean
1
Zaktualizowałem odpowiedź. Wygląda na to, że będziesz musiał ręcznie dodać tę funkcję do inicjalizacji select2, aby wiedział, jak obsłużyć valpołączenie.
Jack
1
@AdamKDean: Można dodatkowo przetestować, czy <select>przekonwertowano je na select2kontrolę, testując istnienie klasy select2-offscreenw sieci <select>. Wszystkie elementy paska narzędzi wyszukiwania mają id, które zaczynają się od gs_przedrostka i mają nazwę jak w colModel. Możesz użyć, getGridParamaby uzyskać colModel.
Oleg
Dzięki, udało mi się uzyskać informacje o filtrze, po prostu potrzebuję sposobu, aby ustawić je po odtworzeniu paska filtru za pomocą select2select. Spojrzę dziś jeszcze raz, może mogę to naprawić ze świeżymi oczami. Dzięki jeszcze raz. Aktualizacja: zawinięcie kodu w wynik boolowski naprawił problem, który miałem, chociaż przestał odświeżać pasek wyszukiwania zamiast wybierać poprzedni element.
Adam K Dean
32
this.$("#yourSelector").select2("data", { id: 1, text: "Some Text" });

to powinno pomóc.

Yasser Shaikh
źródło
3
Przykład wielu wartości: this. $ („# YourSelector”). Select2 („data”, [{id: 1, text: „Some Text”}, {id: 2, text: „Some Other Text”}]);
RodneyRd
18

To powinno być jeszcze łatwiejsze.

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

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

Neelu
źródło
17

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");
Trong
źródło
Uważam, że to czystsze niż bałagan z „danymi” select2 :) Zmień domenę, niech select2 wymyśli resztę.
Paulj
Testuję na Safari i jest to jedyne faktycznie działające rozwiązanie. Inne są bardziej wymowne i wolałbym je, ale bardziej niż cokolwiek innego, wolę działający kod. I to jest to. :)
David
Dzięki za milion! Pracuję z wybranymi 2 polami, w których oba pola są wypełnione Ajaxem i użyłem dodatkowych właściwości danych dla pierwszego pola, aby ustawić wartość drugiego, używając tego. Jeszcze raz dziękuję !!!!
Sam
16

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");
Abram
źródło
12

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');
minlare
źródło
Tak, to najlepsze wszechstronne rozwiązanie. Naprawdę myślę, że Select2 powinien automatycznie wyzwalać wewnętrzne zdarzenie „change.select2”, aby zaktualizować wyświetlacz po zmianie wartości. Ale co najmniej zapewnia to prosty sposób na aktualizację wyświetlacza w celu dopasowania do nowej wartości, bez wyzwalania procedur obsługi zdarzeń niestandardowych zmian.
DaveInMaine
this '$ (element) .val (val) .trigger (' change.select2 ');' pracował dla mnie. Dziękuję @minlare.
Ray
9

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.

Aldodzb
źródło
5

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()

Utkarsh Pandey
źródło
to nie zadziała, jeśli wprowadzisz ciąg w nawiasach kwadratowych.
Utkarsh Pandey,
5

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

Rmalmoe
źródło
Spróbuj uruchomić („change.select2”). Trigger („select2: select”); jeśli sama zmiana nie wystarczy
Tebe
4

Mój oczekiwany kod:

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

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

Abdullah Sheik Davood
źródło
4

Zrób to

 $('select#id').val(selectYear).select2();
Jaskaran singh Rajal
źródło
Chociaż ten kod może odpowiedzieć na pytanie, zapewnienie dodatkowego kontekstu dotyczącego tego, dlaczego i / lub jak ten kod odpowiada na pytanie, poprawia jego długoterminową wartość.
rollstuhlfahrer
Nie mam wiedzy na temat JqGrid, ale za pomocą tego kodu możesz w prosty sposób zmienić wartość
select2
2

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
        }
    });
});
użytkownik3444748
źródło
1

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'); 
Jewgienij Afanasiew
źródło
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
        }
    });
});

Czcionka: wybierz 2 dokumenty

CodeNoob
źródło
0

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
Foram Thakral
źródło