選択フォームの値を取得する方法
選択フォームのどの項目が選択状態かを確認するには、要素の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 =
関連記事
- 選択フォームの値をセットする方法
- 選択フォームの項目を選択状態にするには、要素のselectedプロパティにtrueを指定します。
- 入力フォームの値を取得する方法
- 入力フォームの値を取得するには、プロパティのvalueを参照しましょう。
- 入力フォームに値をセットする方法
- 入力フォームの値をセットするには、valueに目的の値を代入します。
- ラジオボタンの値を取得する方法
- どのラジオボタンが選択状態かを取得するには、要素のcheckedプロパティを確認します。