web-dev-qa-db-fra.com

L'événement select2 onchange ne fonctionne qu'une seule fois

J'ai un problème avec Select2 de jQuery.

Lorsque la page se charge, si O clique sur le résultat de la recherche, elle sélectionnera et déclenchera la modification de l'événement, mais seulement la première fois.

Si je cherche une autre fois, ce ne sera pas le cas.

Voici mon code (c'est une recherche basée sur Ajax):

jQuery('#search_code').select2({
    'width': '600px',
    'tokenSeparators': [',', ' '],
    'closeOnSelect': false,
    'placeholder': 'scan or type a SKU or product or ESN',
    'minimumInputLength': 1,
    'ajax': {
        'url': 'lookProduct',
        'dataType': 'json',
        'type': 'POST',
        'data': function (term, page) {
            return {
                barcode: term,
                page_limit: 3,
                page: page
            };
        },
        'results': function (data, page) {
            return {
                results: data
            };
        }
    }
}).on('change', function (e) {
    var str = $("#s2id_search_code .select2-choice span").text();

    DOSelectAjaxProd(this.value, str);
    //this.value
}).on('select', function (e) {
    console.log("select");

});
jqueryeventsonchangejquery-select2
14
PartySoft

Voici ce que j'utilise:

$("#search_code").live('change', function(){
  alert(this.value)
});

Pour les derniers utilisateurs de jQuery, celui-ci devrait fonctionner:

$(document.body).on("change","#search_code",function(){
 alert(this.value);
});
23
Steel Brain

Apparemment, l'événement de changement n'est pas déclenché si une sélection existe déjà lors de l'utilisation des données. J'ai fini par mettre à jour les données manuellement sur select pour résoudre le problème.

$("#search_code").on("select2-selecting", function(e) {
    $("#search_code").select2("data",e.choice);
});

Je sais que c'est assez tard mais j'espère que cette réponse fera gagner du temps aux autres.

10
Keith Muenze

Depuis version 4.0. , des événements tels que select2-selecting, ne fonctionne plus. Ils sont renommés comme suit:

  • select2-close est maintenant select2: close
  • select2-open est maintenant select2: open
  • select2-Opening est maintenant Select2: Opening
  • select2-selection est maintenant select2: selection
  • select2-supprimé est maintenant select2: supprimé
  • select2-remove est maintenant select2: unselecting

Réf: https://select2.org/programmatic-control/events

(function($){
  $('.select2').select2();
  
  $('.select2').on('select2:selecting', function(e) {
    console.log('Selecting: ' , e.params.args.data);
  });
})(jQuery);
body{
  font-family: sans-serif;
}

.select2{
  width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>

<select class="select2" multiple="multiple">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
</select>
9
Nisarg
$('#search_code').select2({
.
.
.
.
}).on("change", function (e) {
      var str = $("#s2id_search_code .select2-choice span").text();
      DOSelectAjaxProd(e.val, str);
});
6
HamidReza

Cela est dû au fait que l'ID des articles est le même. Le changement ne se déclenche que si un identifiant d'élément différent est détecté lors de la sélection.

Vous avez donc 2 options: La première consiste à vous assurer que chaque élément a un identifiant unique lors de la récupération des données depuis ajax.

La seconde consiste à déclencher un nombre Rand à formatSelection pour l'élément sélectionné.

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

.

formatSelection: function(item) {item.id =getRandomInt(1,200)}
6
cpugourou

Définissez votre .on écouteur pour rechercher des événements select2 spécifiques. L'événement "change" est le même que d'habitude mais les autres sont spécifiques au contrôle select2 donc:

  • changement
  • select2-ouverture
  • select2-open
  • select2-close
  • select2-highlight
  • select2-selection
  • select2-supprimé
  • select2-chargé
  • select2-focus

Les noms sont explicites. Par exemple, select2-focus se déclenche lorsque vous concentrez le contrôle.

2
Dradge

Mon élément select2 ne déclenchait pas l'événement onchange car la liste déroulante ne proposait qu'une seule valeur, ce qui rend impossible la modification de la valeur.

La valeur n'ayant pas changé, aucun événement n'a été déclenché et le gestionnaire n'a pas pu s'exécuter.

J'ai ensuite ajouté un autre gestionnaire pour effacer la valeur, avec le select2-open gestionnaire en cours d'exécution avant le gestionnaire onchange.

Le code source ressemble maintenant à:

el.on("select2-open", function(e) {
    $(this).val('');
});
el.on('change', function() {
    ...
});

Le premier gestionnaire efface la valeur, permettant au deuxième gestionnaire de se déclencher même s'il sélectionne la même valeur.

1
Stephane