JavaScriptでドロップダウンメニューの選択項目の取得や変更を検知する方法

JavaScriptでドロップダウンメニューの選択項目の取得や変更を検知したい

Select要素とOpiton要素を使うことでドロップダウンメニューを作成できます。

JavaScriptでドロップダウンメニューの中で選択されている項目を調べるには、Select要素にID属性を指定しておき、JavaScriptでどのOption要素が選択されているかを参照し、そのValue要素を取得する流れになります。

また、Select要素の選択肢の変化を検知するにはchangeイベントを監視する必要があります。addEventListener()メソッドを使ってイベントハンドラーを設定します。

プロパティー

プロパティー意味
セレクト要素.value選択された項目の値文字列
Select要素の仕様

イベント

 イベント意味
changeform要素の値が変更された時に発火
Select要素に対するchangeイベントの仕様

サンプルコード

サンプルコードとして、セレクトボタンの選択肢を取得して選択肢のvalueプロパティの値を出力するコードを紹介します。

また選択肢の変化を検知し、反映するようにしています。

See the Pen JavaScriptでドロップダウンメニューの選択項目の取得や変更を検知する方法 by KAZUKI (@k_kikuchi_tw) on CodePen.

インストラクター