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

Je le ferais comme ceci:

 <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 voulez, vous pourriez avoir la même étiquette que la première option, qui dans ce cas est 1. Encore mieux: mettre une étiquette là pour les choix dans la boîte.

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

Je peux également vous donner une solution de plus, mais cela dépend de vous qui vous convient ou non. Parce que l'utilisateur choisit une option par défaut après avoir sélectionné d'autres options que jsFunction sera appelé 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); } 

Cela marche:

 <select name="type" onmousedown="this.value='';" onchange="alert('Changed.');"> <option value='1'>One</option> <option value='2'>Two</option> <option value='3'>Three</option> <option value='4'>Four</option> <option value='5'>Five</option> <option value='6'>Six</option> <option value='7'>Seven</option> <option value='8'>Eight</option> <option value='9'>Nine</option> <option value='10'>Ten</option> </select> 

Utilisez la propriété "onmouseup" avec chaque élément d'option. C'est verbal, mais devrait fonctionner. De plus, en fonction de ce que votre fonction fonctionne réellement, vous pouvez organiser 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> 

Code JavaScript:

• Sur l'événement mousedown: définissez la valeur de propriété selectedIndex à -1
• Lors de l'événement de changement: gérer l'événement

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é

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

Vous pouvez gérer l'événement blur et effectuer le traitement dont vous avez besoin lorsque l'utilisateur quitte la boîte 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.

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

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

Il fonctionne à chaque fois, en supprimant le point fort et en vous permettant de sélectionner à nouveau le même élément (ou différent).

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>​ 

Comme ça.

Le premier est "vide".

  <option></option> <option>01</option> <option>02</option> <option>03</option> <option>04</option> <option>05</option> <option>06</option> <option>07</option> <option>08</option> <option>09</option> <option>10</option> <option>11</option> <option>12</option>