<select> HTML要素のOnclickへの応答

Question

HTMLで選択要素ドロップダウンリストを作成しました。 selectタグには3つのオプションがあります。 "onclick" JSイベントがselectタグに付加されています。 JavaScriptでは、最初のオプションが選択されている場合に限り、ユーザーに警告する機能があります。ここにJSFiddleと私のコードがあります。

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

私が午前問題は、あなたが最初に別のオプションを選択した場合、Mac用のFirefox上で、このアラートのみが表示される、ということです。つまり、ページがロードされ、「ゾーン1」が表示されている場合、ゾーン1をもう一度クリックすると、アラートがトリガーされません。ゾーン2またはゾーン3をクリックしてから、ゾーン1に戻ってアラートを取得する必要があります。

ただし、Firefox for Windowsでは、Zone 1オプションをクリックするとアラートが表示されます。

これは私が間違って別のイベントがより慣用的なときにonclickイベントを使用していると私につながります。おそらく、私は警告機能をトリガーするselect要素の下にボタンがあるので、実行が遅れることになります。しかし、私は、選択オプションが選択された直後に反応するインターフェースを作成したいと考えています。ここで

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

はECMAScriptのです。

function updateChar() { 

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

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

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

Answer 1

あなたは現代的なHTMLでonclickを使うべきではありませんが、あなたは次のことを試してみてください：

onchange="updateChar(); 

まだよく、あなたがスタートアップコードにイベントハンドラを設定する必要があります。どんな場合でも、それはまだchangeイベントです。

はまた、私はあなたが最初の値がデフォルトにしないように、ドロップダウンメニューは、無害なヌル値で始まることをお勧めします - もちろん、それが意図され、場合を除き：

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