Uruchom akcję po wybraniu select2

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

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ę.

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

Mi to pasuje:

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

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

Powyżej v4

$('#yourselect').on("select2:select", function(e) { 
     // after selection of select2 
});

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