Répondre à Onclick dans un élément HTML <select>

Question

J'ai créé une liste déroulante d'éléments de sélection en HTML. La balise select a trois options. Un événement JS "onclick" est attaché à la balise select. En JavaScript, j'ai une fonction correspondante qui alerte l'utilisateur si et seulement si la première option a été sélectionnée. Voici un JSFiddle avec mon code.

https://jsfiddle.net/TempusF/rad11vgx/12/

Le problème que j'ai est que, sur Firefox pour Mac, cette alerte ne sera affiché que si vous sélectionnez d'abord une autre option. C'est-à-dire que si la page se charge et que "Zone 1" est affiché, cliquer une seconde fois sur Zone 1 ne déclenchera pas l'alerte. Vous devez cliquer sur Zone 2 ou Zone 3, puis sur Retour à Zone 1 pour recevoir l'alerte. Toutefois, sur Firefox pour Windows, tout clic sur l'option Zone 1 affichera l'alerte. Cela m'amène à croire que j'utilise incorrectement l'événement onclick lorsqu'un événement différent est plus idiomatique. Peut-être l'attente est que j'ai un bouton en dessous de l'élément de sélection qui déclenche la fonction d'alerte, différant ainsi l'exécution. Cependant, je voudrais créer une interface qui réagit immédiatement lorsqu'une option de sélection a été choisie.

Voici le code HTML:

<select id="zoneSelect" onclick="updateChar();"> 
    <option value="zone1">Zone 1</option> 
    <option value="zone2">Zone 2</option> 
    <option value="zone3">Zone 3</option> 
</select> 

Voici le ECMAScript.

function updateChar() { 

    var zone = document.getElementById("zoneSelect"); 

    if (zone.value == "zone1"){ 

     alert("You clicked Zone 1."); 
    } 
} 

Answer 1

Vous ne devriez pas utiliser onclick en html moderne, mais vous pouvez essayer ce qui suit:

onchange="updateChar(); 

Mieux encore, vous devez définir le gestionnaire d'événements dans le code de démarrage. En tout cas, c'est toujours l'événement change.

Aussi, je recommande un menu déroulant commence par une valeur nulle sans danger, de sorte que vous ne pas par défaut à la première valeur - à moins, bien sûr, c'est l'intention:

<option value="">Choose one …</option>