JavaScript

レシピ

フォーム

プルダウンメニューの選択した項目を取得・変更する

フォームのプルダウンメニューで選択された項目を取得したり、選択状態を変更する方法について解説します。

この記事のポイント

  • プルダウンメニューの選択状態はselectedプロパティを参照する
  • 複数選択のときの値や、選択項目のラベルを取得したいときはoption要素を参照する
  • プルダウンメニューの選択状態はselectedプロパティtrueを設定すると選択状態になる

目次

プルダウンメニューの選択状態を取得する

フォームにあるプルダウンメニュー(select要素)の選択している項目を取得するときはvalueプロパティselectedプロパティを参照します。

今回は解説用に以下のHTMLコードを使います。

HTMLコード例

<form method="post" action="">
  <select name="state">
    <option value="1">東京</option>
    <option value="2">埼玉</option>
    <option value="3">群馬</option>
    <option value="4">栃木</option>
    <option value="5">茨城</option>
    <option value="6">千葉</option>
    <option value="7">神奈川</option>
  </select>
</form>

プルダウンメニューは親要素にあたるselect要素と、選択肢になるoption要素を組み合わせて使います。

選択した項目を取得するときはselect要素valueプロパティを参照するか、またはoption要素selectedプロパティvalueプロパティから取得できます。
手軽な方法は1つ目のselect要素valueプロパティを参照する方法で、次のように値を参照します。

コード例

window.addEventListener('DOMContentLoaded', function(){

	// select要素を取得
	var select_state = document.querySelector("select[name=state]");

	select_state.addEventListener('change',function(){
		console.log(select_state.value);
	});
});

こちらのコードで実行している内容を解説します。

1行目のイベントリスナー「DOMContentLoaded」はページ読み込み時に処理を実行するために記述しています。

続くquerySelectorメソッドではselect要素を取得して、さらにイベントリスナー「change」を登録します。
イベントリスナー「change」はプルダウンメニューが選択されるタイミングで処理を実行することができ、ここではselect要素valueプロパティを参照して選択された項目の値を出力するようにしています。

valueプロパティから取得する値で選択した項目を判断することも可能ですが、multiple属性で項目を複数選択できるときや、項目の値ではなくラベルを参照したいときなど、select要素の子要素であるoption要素を参照した方が適当なことがあります。

以下の例はoption要素を参照する形に変更したものです。
イベントリスナーの登録までは上記のコードと共通になります。

コード例

window.addEventListener('DOMContentLoaded', function(){

	// select要素を取得
	var select_state = document.querySelector("select[name=state]");

	select_state.addEventListener('change',function(){

		// 全てのoption要素を取得
		var option_states = document.querySelectorAll("select[name=state] option");
		for(var state of option_states) {

			if(state.selected) {
				console.log(state.value); // 「埼玉」を選択したら「2」と出力
				console.log(state.textContent); // 「埼玉」を選択したら「埼玉」と出力
			}
		}
	});
});

querySelectorAllメソッドで全てのoption要素を取得して、変数option_statesに入れます。
この変数には取得したoption要素が配列形式で入ります。

続いて、option要素の数だけループ処理を実行するようにfor…of文を使います。
option要素であれば選択状態をselectedプロパティから判断することができます。

selectedプロパティは選択状態ならtrue、選択されていないときはfalseが入るため、これをif文の条件式として設定します。
if文の中では選択された項目の値とラベルをそれぞれ出力します。

プルダウンメニューが複数選択できるmultiple属性がついている時でも、上記のコードで全ての選択項目の値とラベルを出力することができます。
以下のHTMLコードはmultiple属性を追加し、さらにoptgroup要素を使って地方をグルーピングしています。

HTMLコード例

<form method="post" action="">
	<select name="state" multiple>
		<optgroup label="関東">
			<option value="1">東京</option>
			<option value="2">埼玉</option>
			<option value="3">群馬</option>
			<option value="4">栃木</option>
			<option value="5">茨城</option>
			<option value="6">千葉</option>
			<option value="7">神奈川</option>
		</optgroup>
		<optgroup label="関西">
			<option value="8">大阪</option>
			<option value="9">京都</option>
			<option value="10">兵庫</option>
			<option value="11">滋賀</option>
			<option value="12">奈良</option>
			<option value="13">和歌山</option>
		</optgroup>
	</select>
</form>

JSコードは変更する必要はありません。
項目の複数選択がONになっている状態で、「東京」「千葉」「奈良」を選択すると以下のように出力されます。

出力例

// 1
// 東京
// 6
// 千葉
// 12
// 奈良

プルダウンメニューの選択状態を変更する

プルダウンメニューの項目の選択状態を変更するときはselectedプロパティに値を代入することで可能です。
選択状態にするときはtrueを入れ、選択解除するときはfalseを入れます。

以下の例はページが読み込まれたタイミングで「京都」のみ選択状態にし、その他の項目は選択解除を行います。

コード例

window.addEventListener('DOMContentLoaded', function(){

	var option_states = document.querySelectorAll("select[name=state] option");
	for(var state of option_states) {
		if(state.textContent === '京都') {
			state.selected = true;
		} else {
			state.selected = false;
		}
	}
});

ページが読み込まれたタイミングで全てのoption要素を取得して、textContentプロパティメソッドが「京都」の項目のみselectedプロパティtrueを入れて選択状態にします。
「京都」以外の項目についてはelse文が実行されてselectedプロパティfalseが入ります。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。