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

選択フォームの値をセットする方法

選択フォームのある項目を選択状態にするには、その項目の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 ;

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