SYNCERのロゴ
アイキャッチ画像

選択フォームの値を取得する方法

選択フォームのどの項目が選択状態かを確認するには、要素のselectedプロパティを参照します。

サンプルコード

単一

option要素そのものを指定して、その要素が選択状態か否かを確認するケースです。selectedプロパティの値は、選択状態だとtrue、違うとfalseになります。

<select>
	<option id="target">選択肢1
	<option>選択肢2
</select>
var element = document.getElementById( "target" ) ;

if ( element.selected ) {
	// 選択状態である
} else {
	// 選択状態ではない
}

グループ

単独選択型

現在選択されている項目の値を取得するには、option要素ではなく、その親のselect要素のvalueプロパティを参照しましょう。

<select id="target">
	<option>選択肢1
	<option>選択肢2
</select>
// select要素を取得
var element = document.getElementById( "target" ) ;

// 選択状態の項目の値を取得
var a = element.value ;

複数選択型

複数の項目を選択できる選択フォームの場合、各option要素が選択状態か否かを調べていくのが定番です。select要素のoptionsプロパティで、そのselect要素に所属する全てのoption要素をHTMLCollectionで取得できます。

<select id="target" multiple size="4">
	<option>選択肢1
	<option>選択肢2
	<option>選択肢3
	<option>選択肢4
</select>
// select要素を取得
var element = document.getElementById( "target" ) ;

// 全てのoption要素を取得
var elements = element.options ;

// 各要素の値を確認
var a = "" ;

for ( var i=0,l=elements.length; l>i; i++ ) {
	if ( elements[i].selected ) {
		a += elements[i].value + " " ;
	}
}

デモ

単一

選択肢1のoption要素が選択状態か否かを判定します。

// <option id="target">選択肢1
var element = document.getElementById( "target" ) ;

if ( element.selected ) {
	var a = "「選択肢1」は選択されています。" ;
} else {
	var a = "「選択肢1」は選択されていません。" ;
}

a =

グループ

単独選択型

// <select id="target"> ... </select>
var element = document.getElementById( "target" ) ;

var a = element.value ;

a =

複数選択型

// <select id="target"> ... </select>
var element = document.getElementById( "target" ) ;

var elements = element.options ;

for ( var a="", i=0,l=elements.length; l>i; i++ ) {
	if ( elements[i].selected ) {
		a += elements[i].value + " " ;
	}
}

a =

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年7月30日 (日)
コンテンツを公開しました。