JavaScriptの「Form」オブジェクトと各「elements」の入力を取得する基本JavaScript標準ライブラリの使い方超入門(8)(4/5 ページ)

» 2016年11月15日 05時00分 公開
[金城俊哉]

選択肢が多いときは折り畳めばいいんだ(セレクトボックス)

Onepoint

 セレクトボックスは、複数の選択肢をプルダウン式のリスト、またはボックス構造のリスト形式で表示するフォーム要素です。ラジオボタンやチェックボックスがすべての選択肢を画面上に表示するのに対し、セレクトボックスはプルダウンリストやボックスの中に選択肢を埋め込むので、選択肢が多い場合でもスペースをとらず、コンパクトに配置することができるのが特徴です。

 セレクトボックスには、単一選択型のプルダウンリストと、複数選択型のリストボックスがあります。

プルダウンリスト

Onepoint

 select要素を配置し、選択項目をoption要素で追加します。

プルダウンリストを配置
表示したところ

リストボックス

Onepoint

 select要素を配置し、multiple属性でリストボックスであることを指定し、size属性で項目の数を指定します。個々の項目はoption要素で追加します。

リストボックスを配置
表示したところ

セレクトボックスのプロパティ

Important

 JavaScriptでは、セレクトボックスのoption要素をOptionオブジェクトとして扱います。Optionオブジェクトはoptionsプロパティで取得できます。Optionオブジェクトは、複数のoption要素を格納した配列です。

optionsプロパティによるOptionオブジェクトの取得
optionsプロパティでOptionオブジェクトの個々のオプション要素にアクセス

 Optionオブジェクトには、次のプロパティがあります。

lengthプロパティ
構文 document.form.element.options.length
プロパティの値 Optionオブジェクトの配列要素の個数。

 

defaultSelectedプロパティ
構文 document.form.element.options.defaultSelected
プロパティの値 初期値として選択されていたかどうか(true/false)

 

selectedプロパティ
構文 document.form.element.options.selected
プロパティの値 現在選択されているかどうか(true/false)。

 

selectedIndexプロパティ
構文 document.form.element.selectedIndex
プロパティの値 現在選択されているオプションオブジェクトを示すインデックス番号。

 

textプロパティ
構文 document.form.element.options.text
プロパティの値 オプションとして表示されている文字列。

 

valueプロパティ
構文 document.form.element.options.value
プロパティの値 フォームの値として送信される値。

セレクトボックスの項目の取得

 セレクトボックスの各項目には、次のように記述することでアクセスできます。

セレクトボックスの項目の取得

 選択された項目に直接、アクセスするには、selectedIndexプロパティを使って次のように記述します。

コード例
Onepoint

 optionsプロパティで取得するOptionオブジェクトは、すべてのoption要素を格納した配列です。なので、selectedIndexプロパティで選択されたoption要素のインデックスを取得するというわけです。

  • optionプロパティ・・・・・・・<select>タグ内部の<option>タグの配列
  • selectedIndexプロパティ・・・セレクトボックスで選択されたoption要素のインデックス値

 この方法を使えば、<option>テキスト</option>の「テキスト」の部分を取得することができます。

コード例

value値の取得

 選択された項目(option要素)のvalueの値は、次のように記述することで取得します。

value値の取得
Attention

 ただし、セレクトボックスは、先頭の選択値のみを返すので、複数の項目を選択できるリストボックスの場合は、for文を用いてアクセスすることが必要になります。これについては、リストボックスの項目で見ていくことにします。

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。