web-dev-qa-db-fra.com

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

J'utilise select2 library pour ma recherche.
Y at-il un moyen de déclencher une action après avoir sélectionné un résultat de recherche? par exemple. ouvrez 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
});
jquerysearchjquery-select2
59
spyfx

Voir la section Evénements de documentation

Selon la version, l'un des extraits ci-dessous devrait vous donner l'événement de votre choix. Sinon, remplacez simplement "select2-selection" par "change".

Version 4.0 +

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

Merci à snakey pour la notification que cela a changé depuis 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 se lit comme suit:

select2-selection Renvoyé lorsqu'un choix est sélectionné dans le liste déroulante, mais avant toute modification de la sélection . Cet événement permet à l'utilisateur de refuser une sélection en appelant event.preventDefault ()

alors que le changement a:

changement Renvoyé lorsque la sélection est modifiée.

Donc, change peut être plus approprié pour vos besoins, selon que vous souhaitiez que la sélection soit complétée et que vous fassiez ensuite votre événement, ou bloquez potentiellement le changement.

138
Ross

Quelques changements ont été apportés aux noms des événements select2 (je pense sur les versions 4 et supérieures) afin que le '-' soit changé en ce ':'.
Voir les exemples suivants:

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

Vous pouvez vérifier tous les événements sur le site du plugin 'select2': select2 Events

16
Tarek

Ça marche pour moi:

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

Selon mon utilisation ci-dessus v.4 cela va marcher

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

Et pour moins que v.4 cela va marcher:

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

Pour ci-dessus v4

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