<OPTGROUP>見出し付きプルダウンメニューを作成

<OPTGROUP>では、セレクトボックスの項目(<OPTION>)をグループ化して、見出し付きのプルダウンメニューを作ることができます。 またグループ化する事で、対応したブラウザでは項目が階層化されます。

使い方はプルダウンメニューとして表示したい部分全体を<OPTGROUP>~</OPTGROUP>で囲み、その中に<OPTION>を記述し各項目(選択肢)を設定します。さらに<OPTGROUP>のlabel属性で各項目の見出しを設定することができます。

対応していないブラウザでは見出しは表示されず、通常のプルダウンメニュー(セレクトボックス)として表示されます。

<OPTGROUP>のlabel属性の値は、第1階層(グループ)のタイトルとして項目に表示されます。 その下の階層は、その中の<OPTION>のlabel属性となります。

<OPTION>タグのlabel属性の値としては、<OPTION>で指定した項目のテキストよりも簡略化したものを指定します。この属性を指定した場合は、そのタグ内に記述したテキストよりも優先して表示されるようになります。

またこの属性を省略した場合や、ブラウザが対応していない場合は、そのタグ内のテキストの内容がそのまま選択肢として表示されます。 なお<OPTGROUP>は入れ子にすることはできませんので注意して下さい。

使用した時の例

<p>あなたが良く食べるアイスは?<br />
<select name="ice">
<optgroup label="ハーゲンダッツ">
  <option label="ミント" value="mint">チョコミント</option>
  <option label="メープル" value="maple">メープルカスタードクッキー</option>
</optgroup>
<optgroup label="スーパーカップ">
  <option value="vanila">超バニラ</option>
  <option value="cokie">チョコクッキー</option>
</optgroup>
</select>
</p>

ブラウザ上の表示例

あなたが良く食べるアイスは?

書式

  • <optgroup label="グループ名">~</optgroup> ・・・・・・ グループを作成
  • <option label="短い選択肢">~</option> ・・・・・・ グループ内の項目

属性

disabled この選択肢を無効にする
label="" グループ名の指定。タイトルとして表示される(html4.01では必ず指定)

対応ブラウザなどのデータ

形式 <optgroup>~</optgroup> カテゴリ なし
親要素 select 子要素 option / script / template
開始タグ 必須 終了タグ 省略可能
汎用属性 accesskey / class / dir / id / lang / style / tabindex / title
対応ブラウザ Internet Explorer6~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~