複数選択できるセレクトボックスの選択状態と値を取得する

JavaScriptで、複数選択できるセレクトボックスの選択状態を取得する場合は、 selected プロパティを使用します。値を取得する場合はvalueプロパティを使用します。

単一選択のセレクトボックスのように、 単純にvalueプロパティを参照しても取得できないので注意が必要です。

複数選択可能なセレクトボックスのサンプルコード

HTML

次のように、「multiple」を指定し、 複数選択できるセレクトボックスを用意します。

<form>
	<select id="idname" name="test" multiple>
		<option selected>text1</option>
		<option selected>text2</option>
		<option>text3</option>
	</select>
</form>

JavaScript

セレクトボックスの選択状態は、option要素のselectedプロパティを参照します （checkedプロパティではありません）。

値を取得する場合は、value プロパティを参照します。

var elem = document.getElementById('idname');

var opts = elem.options; // select要素のoptionプロパティ

console.log(opts);       // HTMLOptionsCollection(3)

for (var i = 0; i < opts.length; i++) {
	
	if (opts[i].selected) {
		console.log(opts[i].value);
	}
}

// 実行結果

HTMLOptionsCollection(3)
text1
text2

まず、getElementById()でselect要素を取得し、optionプロパティを参照します。

これによりHTMLOptionCollectionオブジェクトを取得できます。

あとはHTMLOptionCollectionオブジェクトをループで回して取得します。

optionプロパティを参照するところがポイントです。