Comment déclencher un événement de changement sur un HTMLSelectElement si la nouvelle valeur est la même que l'ancienne ?

Question

J'ai le balisage suivant :

    1
    2
    3

Lorsqu'un utilisateur ouvre la liste déroulante et sélectionne la même option qui avait été précédemment sélectionnée (ou ne change pas la sélection du tout), JavaScript ne la considère pas comme un événement onchange. Ainsi, la fonction jsFunction() n'est pas appelée. Mais je veux que la fonction jsFunction() soit appelée même dans ce cas. Comment puis-je y parvenir ?

Answer 1

Je le ferais comme ça :

  Label
  1
  2
  3

Si vous le souhaitez, vous pouvez avoir le même libellé que le premier choix, qui dans ce cas est 1. Mieux encore : mettez un libellé pour les choix dans la boîte.

Answer 2

Vous devez ajouter une option vide pour résoudre cela,

Je peux également vous donner une autre solution mais c'est à vous de voir si cela vous convient ou non, car si l'utilisateur sélectionne l'option par défaut après avoir sélectionné d'autres options, la fonction jsFunction sera appelée deux fois.

    1
    2
    3

function jsFunction(){
  var myselect = document.getElementById("selectOpt");
  alert(myselect.options[myselect.selectedIndex].value);
}

Answer 3

Cela fonctionne:

  Un
  Deux
  Trois
  Quatre
  Cinq
  Six
  Sept
  Huit
  Neuf
  Dix

Answer 4

Utilisez la propriété "onmouseup" avec chaque élément d'option. C'est verbeux, mais cela devrait fonctionner. De plus, en fonction de ce que fait réellement votre fonction, vous pourriez organiser les choses un peu différemment, en supposant que le numéro soit important dans le gestionnaire :

1  //obtenir l'élément sélectionné dans le gestionnaire
2  //envoyer explicitement la valeur comme argument
3 //comme ci-dessus, mais en utilisant la propriété value de l'élément et en permettant une valeur d'option dynamique. Vous pourriez également envoyer "this.innerHTML" ou "this.textContent" au gestionnaire, rendant la valeur de l'option inutile

Answer 5

Cela ne se déclenche pas car la valeur n'a pas "changé". C'est la même valeur. Malheureusement, vous ne pouvez pas obtenir le comportement souhaité en utilisant l'événement change.

Vous pouvez gérer l'événement blur et effectuer tout traitement nécessaire lorsque l'utilisateur quitte la zone de sélection. De cette manière, vous pouvez exécuter le code nécessaire même si l'utilisateur sélectionne la même valeur.