web-dev-qa-db-fra.com

Déclencher un événement () lors du réglage de la valeur de <select> avec la fonction val ()

Quel est le moyen le plus simple et le meilleur de déclencher change event lorsque vous définissez la valeur de select element.

Je m'attendais à ce que le code suivant soit exécuté

$('select#some').val(10);

ou

$('select#some').attr('value',  10);

entraînerait le changement d’événement, ce qui, à mon avis, est assez logique. Droite?

Eh bien, ce n'est pas le cas. Vous devez triger changer l'événement () en faisant cela

$('select#some').val(10).change();

ou

$('select#some').val(10).trigger('change');

mais je cherche une solution qui déclencherait un événement de changement dès que la valeur de select est modifiée par du code javascript.

jqueryeventstriggersonchange
117
Goran Radulovic

J'avais un problème très similaire et je ne suis pas tout à fait sûr de votre problème, car votre code suggéré a fonctionné à merveille pour moi. Il immédiatement (une exigence de votre part) déclenche le code de changement suivant.

$('#selectField').change(function(){
    if($('#selectField').val() == 'N'){
        $('#secondaryInput').hide();
    } else {
        $('#secondaryInput').show();
}
});

Ensuite, je prends la valeur de la base de données (elle est utilisée dans un formulaire pour la nouvelle entrée et la modification d'enregistrements existants), la définit comme valeur sélectionnée et ajoute l'élément qui me manquait pour déclencher le code ci-dessus, ".change () ".

$('#selectField').val(valueFromDatabase).change();

Ainsi, si la valeur existante de la base de données est 'N', elle masque immédiatement le champ de saisie secondaire de mon formulaire.

111
criticman

Une chose que j’ai découverte (à la dure), Est que vous devriez avoir 

$('#selectField').change(function(){
  // some content ...
});

défini AVANT d'utiliser 

$('#selectField').val(10).trigger('change');

ou

 $('#selectField').val(10).change();
36
Dima R.

La réponse directe est déjà une question en double: Pourquoi l’événement jquery change ne se déclenche-t-il pas lorsque je définis la valeur d’une sélection en utilisant val ()?

Comme vous le savez probablement, la définition de la valeur select ne déclenche pas l'événement change (). Si vous recherchez un événement déclenché lorsque la valeur d'un élément a été modifiée via JS, il n'en existe pas.

Si vous voulez vraiment faire cela, je suppose que le seul moyen est d'écrire une fonction qui vérifie le DOM sur un intervalle et suit les valeurs modifiées, mais ne le faites certainement pas à moins que vous ne deviez (vous ne savez pas pourquoi vous en auriez besoin)

Ajout de cette solution:
Une autre solution possible serait de créer votre propre fonction wrapper .val() et de la laisser déclencher un événement personnalisé après avoir défini la valeur via .val(), puis, lorsque vous utiliserez votre wrapper .val () pour définir la valeur d'un <select>, événement personnalisé que vous pouvez intercepter et gérer .

Assurez-vous de return this, il est donc chainable en mode jQuery

16
Clarence Liu

Je le sépare, puis j'utilise une comparaison d'identité pour dicter ce qui se passe ensuite. 

$("#selectField").change(function(){
  if(this.value === 'textValue1'){ $(".contentClass1").fadeIn(); }
  if(this.value === 'textValue2'){ $(".contentclass2").fadeIn(); }
});
2
Beaumont

Comme jQuery ne déclenchera pas d’événement de changement natif mais ne déclenchera que son propre événement de changement. Si vous liez un événement sans jQuery, puis utilisez jQuery pour le déclencher, les rappels que vous avez liés ne seront pas exécutés!

La solution est alors comme ci-dessous (100% de travail):

var sortBySelect = document.querySelector("select.your-class"); 
sortBySelect.value = "new value"; 
sortBySelect.dispatchEvent(new Event("change"));
0
Mohamed23gharbi