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

Question

Quel est le moyen le plus simple et le plus efficace de déclencher changement lors de la définition de la valeur de sélectionnez élément.

J'ai prévu que l'exécution du code suivant

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

o

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

aurait pour effet de déclencher l'événement de changement, ce qui me semble assez logique. N'est-ce pas ?

Eh bien, ce n'est pas le cas. Vous devez déclencher l'événement change() en faisant ceci

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

o

$('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 la sélection est modifiée par un code javascript.

Answer 1

J'ai eu un problème très similaire et je ne sais pas vraiment ce qui vous pose problème, car le code que vous avez suggéré a très bien fonctionné pour moi. Il s'agit de immédiatement (une de vos exigences) déclenche 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 à la fois pour les nouvelles entrées et pour la modification des enregistrements existants), je la définis comme la valeur sélectionnée et j'ajoute la pièce qui me manquait pour déclencher le code ci-dessus, ".change()".

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

Ainsi, si la valeur existante dans la base de données est "N", le champ de saisie secondaire est immédiatement masqué dans mon formulaire.

Answer 2

Une chose que j'ai découvert (à la dure), c'est que vous devriez avoir

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

défini AVANT que vous n'utilisiez

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

o

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

Answer 3

La réponse directe se trouve déjà dans une question dupliquée : Pourquoi l'événement de changement jquery ne se déclenche-t-il pas lorsque je définis la valeur d'une sélection à l'aide de val() ?

Comme vous le savez probablement, la définition de la valeur de la sélection ne déclenche pas l'événement change(). Si vous cherchez un événement qui est déclenché lorsque la valeur d'un élément a été modifiée par JS, il n'y en a pas.

Si vous voulez vraiment faire cela, je pense 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 vois pas pourquoi vous en auriez besoin).

Ajouté cette solution :
Une autre solution possible serait de créer votre propre .val() et faire en sorte qu'elle déclenche un événement personnalisé après avoir défini la valeur à l'aide de la fonction .val() alors, lorsque vous utilisez votre wrapper .val() pour définir la valeur d'un fichier de type <select> cela déclenchera votre événement personnalisé que vous pourrez piéger et gérer.

Veillez à return this Il est donc chaînable à la manière de JQuery.

Answer 4

Comme jQuery ne déclenche pas l'événement de changement natif mais seulement son propre événement de changement. Si vous liez un événement sans jQuery et que vous utilisez ensuite jQuery pour le déclencher, les callbacks que vous avez liés ne seront pas exécutés !

La solution est alors la suivante (100% fonctionnelle) :

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

Answer 5

Je le sépare, et ensuite j'utilise une comparaison d'identité pour dicter ce qu'il fait ensuite.

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