私はフロントエンド開発に従事している技術者です。ドロップダウンボックスは、より多くを使用するページ要素です。今日は、実際の作業で発生した問題に基づいて、ドロップダウンボックス登録イベントの例について説明します。私はそれが誰にでも役立つことを願っています。
コードコピーは次のとおりです。
<select name = "" id = "sel">
<オプション値= "111"> 1 </option>
<オプション値= "222"> 2 </option>
<オプション値= "333"> 3 </option>
</select>
上記は、非常にシンプルなシングル選択ドロップダウンボックスコードです。ドロップダウンオプションをクリックして対応する値を取得したい場合、一般コードは次のとおりです。
コードコピーは次のとおりです。
var sel = document.getElementById（ "sel"）;
var option = sel.options;
for（var i = 0; i <option.length; i ++）{
option [i] .onclick = function（）{
alert（this.text）; //ドロップダウンオプションのテキスト値を取得します
alert（this.value）; //ドロップダウンオプションの値を取得します
}
}
上記のコードは、IE9およびChrome以下の予想される効果を生成することはできず、Firefoxで効果的です。この場合、オプションオプションでクリックイベントをバインドすることはお勧めしません。変更は一般的であり、本質的には変更であるため、代わりに変更イベントを使用することをお勧めします。
コードコピーは次のとおりです。
var sel = document.getElementById（ "sel"）;
sel.onchange = function（）{
alert（sel.options [sel.selectedindex] .value）;
}
上記はこの記事のすべてです。あなたがそれを気に入ってくれることを願っています。