Déclenche l'événement change () lors de la définition de la valeur de <select> avec la fonction val ()

Quelle est la manière la plus simple et la meilleure pour déclencher un événement de modification lors de la définition de la valeur de l' élément select .

Je m'attendais à ce que l'exécution du code suivant

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

ou

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

entraînerait le déclenchement de l'événement de changement, ce qui, à mon avis, est une chose assez logique à faire. Droite?

Eh bien, ce n'est pas le cas. Vous devez déclencher l'événement change () 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 un code javascript.

J'ai eu un problème très similaire et je ne sais pas trop avec quoi vous avez un problème, car votre code suggéré a très bien fonctionné pour moi. Il déclenche immédiatement (une exigence de la vôtre) le code de modification 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 sur un formulaire pour les nouvelles entrées et l'édition des enregistrements existants), la définit comme valeur sélectionnée, et ajoute la pièce 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 dans mon formulaire.

Une chose que j'ai découverte (à la dure), c'est que tu devrais avoir

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

défini AVANT d'utiliser

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

ou

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

La réponse directe est déjà dans une question en double: pourquoi l'événement jquery change ne se déclenche-t-il pas lorsque je définis la valeur d'un select à l'aide de val ()?

Comme vous le savez probablement, définir la valeur de select ne déclenche pas l'événement change (), si vous recherchez un événement qui est déclenché lorsque la valeur d'un élément a été modifiée via JS, il n'y en a 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 le deviez (je ne sais pas pourquoi vous en auriez besoin)

Ajout de cette solution: une
autre solution possible serait de créer votre propre .val()fonction wrapper et de la faire déclencher un événement personnalisé après avoir défini la valeur via .val(), puis lorsque vous utilisez votre wrapper .val () pour définir la valeur de a, <select>cela déclenchera votre événement personnalisé que vous pouvez piéger et manipuler.

Soyez sûr return this, donc il est chaînable à la mode jQuery

Je le sépare, puis j'utilise une comparaison d'identité pour dicter ce que fait ensuite.

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

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 s'exécuteront pas!

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"));