Déclencher une action après la sélection select2

Question

J'utilise bibliothèque select2 pour ma recherche.
Y a-t-il un moyen de déclencher une action après avoir sélectionné un résultat de recherche ? par exemple ouvrir une popup, ou une simple alerte 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
});

Answer 1

Voir le documentation section événements

En fonction de la version, l'un des extraits ci-dessous devrait vous donner l'événement que vous souhaitez, ou remplacez simplement "select2-selecting" par "change".

Version 4.0 +

Les événements sont maintenant en format : select2:selecting (au lieu de select2-selecting )

Merci à snakey pour la notification de ce changement à partir de la version 4.0.

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

Version antérieure à 4.0

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

Juste pour clarifier, la documentation pour select2-selecting lire :

sélectionner2-sélectionner Déclenché lorsqu'un choix est sélectionné dans la liste déroulante mais avant qu'une modification n'ait été apportée à la sélection. Cet événement est utilisé pour permettre à l'utilisateur de rejeter la sélection en appelant event.preventDefault()

alors que le changement l'a fait :

c Déclenché lorsque la sélection est modifiée.

Donc change peut être plus approprié à vos besoins, selon que vous souhaitez que la sélection se termine et que vous fassiez ensuite votre événement, ou que vous bloquiez potentiellement la modification.

Answer 2

Des modifications ont été apportées aux noms des événements select2 (je pense que c'est le cas pour la version 4 et les suivantes), de sorte que le nom de l'événement select2 a été modifié. '-' est transformé en ceci ':' .
Voir les exemples suivants :

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

Vous pouvez consulter tous les événements sur le site du plugin "select2" : select2 Événements

Answer 3

Cela fonctionne pour moi :

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

Answer 4

Selon l'utilisation que j'ai faite de la v.4, cela fonctionnera.

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

Et pour moins de la v.4, cela fonctionnera :

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

Answer 5

Pour les versions supérieures à v4

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