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

Je suis en utilisant select2 bibliothèque pour ma recherche.

est-il possible de déclencher une action après la sélection d'un résultat de recherche? par exemple, ouvrir une fenêtre, ou une simple js alerte.

$("#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
});

Vous pouvez lier à la "changer" de l'événement, il y a une section "Événements" sur le lien que tu as donné avec un très long extrait de code pour toutes les différentes liaisons d'événements.

InformationsquelleAutor spyfx | 2013-09-04

144

Voir le documentation de la section événements

Selon la version, l'un des extraits de code ci-dessous devrait vous donner l'événement que vous souhaitez, sinon il suffit de remplacer "select2-en sélectionnant" avec "changement".

Version 4.0 +

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

Grâce à snakey pour la notification que cela a changé que de 4,0
```
$('#yourselect').on("select2:selecting", function(e) { 
   //what you would like to happen
});
```
Version Avant 4.0
```
$('#yourselect').on("select2-selecting", function(e) { 
   //what you would like to happen
});
```
Juste pour clarifier, la documentation de select2-selecting lit:

select2-sélection
Déclenché quand un choix est sélectionné dans le
liste déroulante, mais avant toute modification a été apportée à la sélection.
Cet événement est utilisé pour permettre à l'utilisateur de refuser de sélection par appel
de l'événement.preventDefault()

alors que le changement a:

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

Donc change peut être plus approprié pour vos besoins, selon que vous souhaitez que la sélection terminée, puis faire de votre événement, ou potentiellement bloquer le changement.
- Les événements ont d'autres noms dans des versions plus récentes (par exemple 'select2:sélectionnez'), voir https://select2.github.io/examples.html
- Les événements sont ici dans la doc. Pas évident avec la FAQ de style.
- la "sélection" appel se fait juste avant la valeur est définie. ce qui conduira à: "de la console.log($(this).val())" outputing une valeur vide
- Quand j'ai essayé même dans mon angulaire de la demande, il a été de me donner des valeurs erronées. Supposons que 4 valeurs sont là en choisir 2 options. 1 Minute, 5 Minutes, 1 Heure, Tous Les Jours. Maintenant, en utilisant $('#yourselect').sur("select2-sélection", function(e) {...} Il me faisait valeur précédente que ce que j'ai sélectionné.
- Au lieu de cela, j'ai essayé $('#yourselect').sur("choisir 2-sélectionnez"),function(e){...} Qui a fonctionné pour moi
InformationsquelleAutor Ross
18

Il y a apporté quelques modifications à la select2 événements noms (je pense que sur le v. 4 et les versions ultérieures) de sorte que le '-' est changé en ce ':'.

Voir les exemples suivants:
```
$('#select').on("select2:select", function(e) { 
    //Do stuff
});
```
Vous pouvez consulter tous les événements à la "select2' plugin site:
select2 Événements

InformationsquelleAutor Tarek
8

Ça fonctionne pour moi:
```
$('#yourselect').on("change", function(e) { 
   //what you would like to happen
});
```
- Je ne comprends pas pourquoi, mais cela a fonctionné pour moi lorsque Tarek réponse ne serait pas. J'ai même eu sa réponse pour travailler dans un projet distinct, mais pour une raison quelconque, ce fut la seule remplacer celui obtenu mon projet et en cours d'exécution.
- Cela fonctionne parce que .change événement vient plus tard dans la série d'exécutions que select2:select événement. Pour moi, j'ai essayé de capturer l'sélectionnez css sur select2:select mais même si je l'ai vu sur inspecteur, je ne pouvais pas saisie par select2:select - quand j'ai changé de .change cela a fonctionné parce que Select2 feux select2:select événement avant la mise à jour de la css pour l'original, sélectionnez .. un peu fou, à mon avis.
- @a20 parfois, une simple solution de contournement est de définir les éléments dom, css via html css de sorte que vous n'avez pas à attendre pour le moteur javascript pour le rattraper. Il fonctionne bien dans certains cas.
InformationsquelleAutor Roby Sottini
2

Comme pour mon utilisation ci-dessus v. 4 cela va fonctionner
```
$('#selectID').on("select2:select", function(e) { 
    //var value = e.params.data;  Using {id,text format}
});
```
Et moins de la v. 4 cela va fonctionner:
```
$('#selectID').on("change", function(e) { 
   //var value = e.params.data; Using {id,text} format
});
```
- Ce n'est pas fonctionné pour moi. J'ai modifié le code comme indiqué ci-dessous. e.params.args.data
InformationsquelleAutor amku91

Ci-dessus v4

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

InformationsquelleAutor SHUJAT MUNAWAR

Vous devez vous connecter pour publier un commentaire.