選択肢とグループ化

セレクトボックスの選択肢として使われるoption要素について確認していきます。

※前のページの「セレクトボックス」も合わせてご確認下さい。

select要素及びoption要素の基本的な使い方は以下の通りでした。

<select name="名前">
<option>ラベル1</option>
<option>ラベル2</option>
<option>ラベル3</option>
</select>

ではまずoption要素の中で初期状態で選択された状態にする方法から確認していきます。

初期状態で選択された状態

選択肢のいずれかを初期状態で選択された状態にするにはoption要素のselected属性に値を設定します。

<select name="名前">
<option>ラベル1</option>
<option selected="selected">ラベル2</option>
<option>ラベル3</option>
</select>

selected属性に値として「selected」を指定すると設定された選択肢が選択された状態となります。なおHTMLの場合は単に「selected」とだけ記述も可でしたがXHTMLの場合は「selected="selected"」と記述する必要があります。

具体的には次のように記述します。

<form action="#" method="post">
<p>
海外旅行に行くなら<br />
<select name="select1" size="3">
<option>アジア</option>
<option>アメリカ</option>
<option>ヨーロッパ</option>
<option selected="selected">アフリカ</option>
</select>
</p>
</form>

実際にWebページに配置すると次のように表示されます。

上記のようにリスト形式で表示されていた場合は選択された選択肢が表示される位置まで自動でスクロールされて表示されます。

データ送信時の値の設定

option要素のコンテンツに設定された文字列が選択肢を表す文字列として画面に表示されますが、この文字列がフォームのデータが送信される時にselect要素の値としても送信されます。

ただ画面に表示される文字列ではなく別の値を送信されるデータとして使いたい場合もあります。このような時にはvalue属性を使います。

<select name="名前">
<option value="値1">ラベル1</option>
<option value="値2">ラベル2</option>
<option value="値3">ラベル3</option>
</select>

value属性に設定する値がデータ送信時に送られる値となります。

例えば最初の選択肢の画面に表示されるのは「ラベル1」ですが送信される値は「値1」です。

具体的には次のように記述します。

<form action="#" method="post">
<p>
海外旅行に行くなら<br />
<select name="select1" size="3">
<option value="asia">アジア</option>
<option value="america">アメリカ</option>
<option value="europe">ヨーロッパ</option>
<option value="africa">アフリカ</option>
</select><br /><br />
<input type="submit" name="button" />
</p>
</form>

実際にWebページに配置すると次のように表示されます。

では「ヨーロッパ」を選択してから実際にフォームデータを送信し、送信されたデータを確認してみます。

index.html?select1=europe&button=%E5%AE%9F%E8%A1%8C

select要素の名前である「select1」に対して「select1=europe」とvalue属性で設定した値が送信されていることが確認できます。

選択肢の無効化

選択肢としては含めておきたいが選択はできないようにすることが可能です。option要素のdisabled属性を使います。

<select name="名前">
<option>ラベル1</option>
<option disabled="disabled">ラベル2</option>
<option>ラベル3</option>
</select>

disabled属性に値として「disabled」を指定すると設定された選択肢が無効となり選択できなくなります。なおHTMLの場合は単に「disabled」とだけ記述も可でしたがXHTMLの場合は「disabled="disabled"」と記述する必要があります。

※実際に使う場合にはJavaScriptなどを使って無効/有効を条件に合わせて切り替えるような使い方をします。

具体的には次のように記述します。

<form action="#" method="post">
<p>
海外旅行に行くなら<br />
<select name="select1" size="3">
<option>アジア</option>
<option>アメリカ</option>
<option disabled="disabled">ヨーロッパ</option>
<option>アフリカ</option>
</select>
</p>
</form>

実際にWebページに配置すると次のように表示されます。

無効化にした選択肢は若干色が薄く表示され、マウスでクリックしても選択状態とはなりません。

グループ化

選択肢をグループ化して階層を分けて表示させることができます(ご利用のブラウザが対応している場合)。グループ化するにはoptgroup要素を使います。

<select name="名前">
<optgroup label="グループラベル1">
  <option>ラベル1</option>
  <option>ラベル2</option>
  <option>ラベル3</option>
</optgroup>
<optgroup label="グループラベル2">
  <option>ラベル4</option>
  <option>ラベル5</option>
  <option>ラベル6</option>
</optgroup>
</select>

select要素のコンテンツとして記述されている複数のoption要素に対し、グループとしてまとめるoption要素をoptgroup要素でマークアップします。

この時、optgroup要素の必須の属性であるlabel属性の値として指定した文字列が最初の階層の値として表示されます。ブラウザによって表示形式は異なりますが例えば次のように表示されます。

グループラベル1
  ラベル1
  ラベル2
  ラベル3
グループラベル2
  ラベル4
  ラベル5
  ラベル6

またoption要素のlabel属性にも値を設定すると、optgroup要素に対応しているブラウザで表示した場合にlabel要素に指定した値の方を画面に表示します。

<select name="名前">
<optgroup label="グループラベル1">
  <option label="別のラベル1">ラベル1</option>
  <option label="別のラベル2">ラベル2</option>
  <option label="別のラベル3">ラベル3</option>
</optgroup>
<optgroup label="グループラベル2">
  <option label="別のラベル4">ラベル4</option>
  <option label="別のラベル5">ラベル5</option>
  <option label="別のラベル6">ラベル6</option>
</optgroup>
</select>

この時例えば次のように表示されます。

グループラベル1
  別のラベル1
  別のラベル2
  別のラベル3
グループラベル2
  別のラベル4
  別のラベル5
  別のラベル6

例えばですが「東京都荒川区」「東京都品川区」「東京都中央区」という3つの選択肢があった場合、グループとしてまとめグループラベルとして「東京都」を指定した場合には各選択肢は「荒川区」「品川区」「中央区」とだけ表示する場合などにoption要素のlabel属性を指定するといいと思います。

具体的には次のように記述します。

<form action="index.html" method="get">
<p>
目的地を選んで下さい<br />
<select name="select1" size="10">
<optgroup label="東京都">
<option label="千代田区">東京都千代田区</option>
<option label="大田区">東京都大田区</option>
</optgroup>
<optgroup label="神奈川">
<option label="鎌倉市">神奈川鎌倉市</option>
<option label="小田原市">神奈川小田原市</option>
<option label="逗子市">神奈川逗子市</option>
</optgroup>
<option label="その他">その他の地域</option>
</select>
</p>
</form>

実際にWebページに配置すると次のように表示されます。

FireFoxではグループ化そのものは有効ですがoption要素のlabel属性は使われていません。次にInternet Explorer7で確認してみます。

Internet Explorer7ではoption要素のlabel属性に設定された値が表示されています。

このようにブラウザによって対応状況も異なりますのでoption要素でlabel属性を指定する場合にも別途コンテンツとしてラベルは指定するようにします。