Uruchom akcję po wybraniu select2

79

Do wyszukiwania używam biblioteki select2 .
czy istnieje sposób na wywołanie akcji po wybraniu wyniku wyszukiwania? np. otwórz wyskakujące okienko lub prosty alert js.

$("#e6").select2({
    placeholder: "Enter an item id please",
    minimumInputLength: 1,
    ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
        url: "index.php?r=sia/searchresults",
        dataType: 'jsonp',
        quietMillis: 3000,
        data: function (term, page) {
        return {
            q: term, // search term
            page_limit: 10,
            id: 10
            };
        },
        results: function (data, page) { // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter remote JSON data
            return {results: data};
        },
    },

    formatResult: movieFormatResult, // omitted for brevity, see the source of this page
    formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});
spyfx
źródło
1
Możesz powiązać ze zdarzeniem „zmiana”. W linku, który podałeś, znajduje się sekcja „Zdarzenia” z bardzo długim fragmentem kodu dla wszystkich różnych powiązań zdarzeń.
Ross

Odpowiedzi:

170

Zobacz sekcję dotyczącą wydarzeń w dokumentacji

W zależności od wersji jeden z poniższych fragmentów powinien wskazywać żądane zdarzenie, alternatywnie po prostu zamień „select2-selection” na „change”.

Wersja 4.0 +

Wydarzenia mają teraz format: select2:selecting(zamiast select2-selecting)

Dzięki Snakey za powiadomienie, że zmieniło się to od 4.0

$('#yourselect').on("select2:selecting", function(e) { 
   // what you would like to happen
});

Wersja przed 4.0

$('#yourselect').on("select2-selecting", function(e) { 
   // what you would like to happen
});

Dla wyjaśnienia dokumentacja do select2-selectingczytania:

select2-selection Uruchamiany, gdy wybór jest wybierany z listy rozwijanej, ale przed dokonaniem jakiejkolwiek modyfikacji wyboru. To zdarzenie jest używane, aby umożliwić użytkownikowi odrzucenie wyboru przez wywołanie event.preventDefault ()

podczas gdy zmiana ma:

change Uruchamiane po zmianie wyboru.

changeMoże więc być bardziej odpowiedni dla twoich potrzeb, w zależności od tego, czy chcesz zakończyć wybór, a następnie wykonać wydarzenie, czy potencjalnie zablokować zmianę.

Ross
źródło
13
Zdarzenia mają inne nazwy w nowszych wersjach (np „select2: wybierz”), patrz https://select2.github.io/examples.html
Snakey
1
Wydarzenia są tutaj w doc. Nie jest to oczywiste w stylu FAQ.
Pierre de LESPINAY
1
wywołanie „wybierania” jest wykonywane tuż przed ustawieniem wartości. co doprowadzi do: "console.log ($ (this) .val ())" wypisuje pustą wartość
Joseph Groot Kormelink.
Kiedy próbowałem tego samego w mojej aplikacji kątowej, dawało mi to złe wartości. Załóżmy, że w opcjach select2 są 4 wartości. 1 minuta, 5 minut, 1 godzina, codziennie. Teraz używając $ ('# yourselect'). On ("select2-selection", function (e) {...} To dawało mi poprzednią wartość, którą wybrałem.
Yash Jain
Zamiast tego wypróbowałem $ ('# yourselect'). On ("select2-select"), function (e) {...} To zadziałało
Yash Jain
25

Dokonano pewnych zmian w nazwach zdarzeń select2 (myślę, że w wersji 4 i późniejszych), więc znak „-” jest zamieniany na „:” .
Zobacz następne przykłady:

$('#select').on("select2:select", function(e) { 
    //Do stuff
});

Wszystkie zdarzenia możesz sprawdzić na stronie wtyczki „select2”: zdarzenia select2

Tarek
źródło
13

Mi to pasuje:

$('#yourselect').on("change", function(e) { 
   // what you would like to happen
});
Roby Sottini
źródło
Nie rozumiem dlaczego, ale to zadziałało dla mnie, kiedy odpowiedź Tarka nie. Otrzymałem nawet odpowiedź, że pracuję w oddzielnym projekcie, ale z jakiegoś powodu było to jedyne zastąpienie, które spowodowało, że mój projekt został uruchomiony.
tokyo0709
@ tokyo0709 To działa, ponieważ .changezdarzenie pojawia się później w serii egzekucji niż select2:selectzdarzenie. Dla mnie próbowałem przechwycić css zaznaczonego, select2:selectale mimo że widziałem go w inspektorze, nie mogłem go przechwycić select2:select- kiedy zmieniłem na .changeto zadziałało, ponieważ Select2 uruchamia select2:selectzdarzenie przed aktualizacją css dla oryginalnego wyboru ... trochę szalone , w mojej opinii.
a20
1
@ a20 czasami łatwym obejściem jest ustawienie elementów dom w css za pomocą html css, więc nie musisz czekać, aż silnik javascript nadrobi zaległości. W niektórych przypadkach działa dobrze.
yardpenalty.com
7

Zgodnie z moim użyciem powyżej v.4 to będzie działać

$('#selectID').on("select2:select", function(e) { 
    //var value = e.params.data;  Using {id,text format}
});

A mniej niż wersja 4 to będzie działać:

$('#selectID').on("change", function(e) { 
   //var value = e.params.data; Using {id,text} format
});
amku91
źródło
To nie działa dla mnie. Zmieniłem powyższy kod na podany poniżej. e.params.args.data
Tushar Saxena,
To też nie zadziałało dla mnie, e.params.data przez pole danych nie znaleziono dla undefined. Po bliższej inspekcji nie było pola params ustawionego dla e. W przypadku mojego problemu wystarczyło odczytać wartość, więc wystarczyło mi e.val.
NemyaNation
2

Powyżej v4

$('#yourselect').on("select2:select", function(e) { 
     // after selection of select2 
});
Shujat Munawar
źródło
0
//when a Department selecting
$('#department_id').on('select2-selecting', function (e) {
    console.log("Action Before Selected");
    var deptid=e.choice.id;
    var depttext=e.choice.text;
    console.log("Department ID "+deptid);
    console.log("Department Text "+depttext);
});

//when a Department removing
$('#department_id').on('select2-removing', function (e) {
    console.log("Action Before Deleted");
    var deptid=e.choice.id;
    var depttext=e.choice.text;
    console.log("Department ID "+deptid);
    console.log("Department Text "+depttext);
});
Uma Shankar Pandey
źródło