選択フォームの値をセットする方法
選択フォームのある項目を選択状態にするには、その項目のselectedプロパティにtrueを代入します。
サンプルコード
単一
option要素そのものを指定して、その要素を選択状態にする場合です。selectedプロパティにtrueを代入すれば選択状態になります。
<select>
<option>選択肢1
<option id="target">選択肢2
</select>
// 「選択肢2」のoption要素を取得
var element = document.getElementById( "target" ) ;
// 選択状態にする
element.selected = true ;
グループ
グループ内のある項目を選択状態にしたい場合です。select要素のoptionsプロパティには、所属する全てのoption要素がHTMLCollectionで含まれています。その中から目的のoption要素をインデックス番号で指定しましょう。
<select id="target">
<option>選択肢1
<option>選択肢2
<option>選択肢3
</select>
// select要素を取得
var element = document.getElementById( "target" ) ;
// option要素の集合を取得
var elements = element.options ;
// 2つ目の項目を選択状態にする
elements[1].selected = true ;
デモ
コードを編集して、結果の違いを確認してみて下さい。
単一
選択肢2のoption要素を選択状態にします。
// <option id="target">選択肢2
var element = document.getElementById( "target" ) ;
element.selected = true ;
グループ
// <select id="target"> ... </select>
var element = document.getElementById( "target" ) ;
var elements = element.options ;
elements[1].selected = true ;
関連記事
- 入力フォームに値をセットする方法
- 入力フォームの値をセットするには、valueに目的の値を代入します。
- HSVをRGBに変換する方法
- カラーコードをHSVからRGBに変換します。
- ダブルクリックのイベントを設定する方法
- マウスデバイスでダブルクリックを検出します。
- 選択フォームの値を取得する方法
- 選択フォームのどの項目が選択状態かを取得するには、要素のselectedプロパティを確認します。
- ラジオボタンの値を取得する方法
- どのラジオボタンが選択状態かを取得するには、要素のcheckedプロパティを確認します。