web-dev-qa-db-fra.com

HTML SELECT - Déclenche l'événement JavaScript ONCHANGE même lorsque l'option n'est pas modifiée

J'ai le balisage suivant:

<select onchange="jsFunction()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

Lorsqu'un utilisateur ouvre la liste déroulante et sélectionne la même option que celle précédemment sélectionnée (ou ne modifie en rien la sélection), JavaScript ne la considère pas comme un événement onchange. Donc, la jsFunction() n'est pas appelée. Mais je veux que la jsFunction() soit appelée même dans ce cas. Comment puis-je atteindre cet objectif?

javascripthtml-select
55
Dilip Raj Baral

Je le ferais comme ça:

<select onchange="jsFunction()">
  <option value="" disabled selected style="display:none;">Label</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Si vous le souhaitez, vous pouvez utiliser la même étiquette que la première option, qui dans ce cas est 1. Encore mieux: placez-y une étiquette pour les choix proposés dans la zone.

76
Simon Aronsson

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

Je peux aussi vous donner une solution de plus, mais sa décision vous convient ou non, car l'utilisateur sélectionne l'option par défaut après avoir sélectionné d'autres options que jsFunction sera appelée deux fois.

<select onChange="jsFunction()" id="selectOpt">
    <option value="1" onclick="jsFunction()">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

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

utilisez la propriété "onmouseup" avec chaque élément d'option. c'est verbeux, mais devrait fonctionner. de plus, en fonction de ce que votre fonction accomplit réellement, vous pourriez arranger les choses un peu différemment, en supposant que le nombre est important dans le gestionnaire:

<select>
<option onmouseup="handler()" value="1">1</option>  //get selected element in handler
<option onmouseup="handler(2)" value="2">2</option>  //explicitly send the value as argument
<option onmouseup="handler(this.value)" value="3">3</option> //same as above, but using the element's value property and allowing for dynamic option value. you could also send "this.innerHTML" or "this.textContent" to the handler, making option value unnecessary
</select>
1
eamyx

Il suffit de définir la selectIndex de la balise <select> associée sur -1 comme dernière étape de votre événement de traitement.

mySelect = document.getElementById("idlist");
mySelect.selectedIndex = -1;

Cela fonctionne à chaque fois, en supprimant la surbrillance et en vous permettant de sélectionner le même élément (ou un élément différent).

1
user6132740

Code JavaScript:

  • sur l'événement mousedown: définit la valeur de la propriété selectedIndex sur -1
  • on change event: événement handle

Le seul inconvénient est que lorsque l'utilisateur clique sur la liste déroulante, l'élément actuellement sélectionné n'apparaît pas sélectionné

1
figolu

Ce n'est pas le tir parce que la valeur n'a pas "changé". C'est la même valeur. Malheureusement, vous ne pouvez pas obtenir le comportement souhaité à l'aide de l'événement change.

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

0
Strelok

Essaye ça. Ajoutez simplement une option vide. Cela résoudra votre problème.

<select onchange="jsFunction()">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>​
0
Praveen Singh