【メモ】プルダウンメニューにおける選択した選択肢の取得（JavaScript, addEventListener, changeイベント）

HTMLはユーザーとのインタラクティブのためのインターフェースが充実しています。 select要素を用いるとプルダウンメニューを作成することができ、JavaScriptを用いるとユーザーが選択した選択肢を即座に取得することができます。

select要素によるプルダウンメニューの作成方法

プルダウンメニューの選択肢はselect要素の子要素に、選択肢の数だけoption要素を用意することで作成することができます。

<select id="word">
<option value="none">選択してください</option>
<option value="aoba">青葉区</option>
<option value="miyagino">宮城野区</option>
<option value="wakabayashi">若林区</option>
<option value="izumi">泉区</option>
<option value="taihaku">太白区</option>
</select>

JavaScriptを用いてユーザーが選択したプルダウンメニューの選択肢は、select要素に対するchangeイベント発生時の選択中のoption要素番号を取得することで把握することができます。

//select要素の取得
var select = document.querySelector("#word");

//option要素の取得（配列）
var options = document.querySelectorAll("#word option");

//select要素のchangeイベントの登録
select.addEventListener('change', function(){

		//選択されたoption番号を取得
		var index =  this.selectedIndex;
		//options[ index ].value にoption要素のvalue属性値
		//options[ index ].innerHTML にoption要素内の文字列

});

なお、選択中の選択肢はJavaScriptでselectedIndexプロパティにoption要素番号を与えることで指定することもできます。

		select.selectedIndex = index;

実行結果（選択したプルダウンメニューの選択肢を表に表示）