HTML
選択メニューコントロール

構文

• <select name=""></select>
• <datalist id=""></datalist>
• <optgroup label="Option Group"></optgroup>
• <option value="">Option</option>

メニューを選択

<select>要素は、ユーザーがオプションを選択できるドロップダウンメニューを生成します。

<select name="">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

サイズの変更

size属性で選択メニューのサイズを変更することができます。サイズが0または1の場合、標準のドロップダウンスタイルメニューが表示されます。サイズが1より大きい場合は、ドロップダウンを複数の行を表示するボックスに変換します。行ごとに1つのオプションとスクロールバーがあり、使用可能なオプションをスクロールします。

<select name="" size="4"></select>

複数のオプションの選択メニュー

デフォルトでは、ユーザーは1つのオプションのみを選択できます。 multiple属性を追加すると、 multipleオプションを一度に選択し、選択したすべてのオプションをフォームに送信できます。 multiple属性を使用すると、ドロップダウンメニューが自動的にボックスに変換され、サイズが定義されているかのようになります。これが発生したときのデフォルトのサイズは、使用している特定のブラウザーによって決まります。複数の選択を許可しながらドロップダウンスタイルメニューに戻すことはできません。

<select name="" multiple></select>

multiple属性を使用する場合は、サイズに0と1を使用するのに違いがありますが、属性を使用しない場合は違いはありません。 0を使用すると、ブラウザはデフォルトの方法で動作するようにプログラムされます。 1を使用すると、結果のボックスのサイズが明示的に1行に設定されます。

オプショングループ

<optgroup>要素を使用すると、オプションの長いリストでより構造化されたレイアウトを提供するために、選択メニュー内でオプションをきれいにまとめることができます。

構文は非常に基本的なものです。単にlabel属性の要素を使用してグループのタイトルを識別し、そのグループ内に含める必要があるゼロ個以上のオプションを含んでいます。

<select name="">
  <option value="milk">Milk</option>
  <optgroup label="Fruits">
    <option value="banana">Bananas</option>
    <option value="strawberry">Strawberries</option>
  </optgroup>
  <optgroup label="Vegetables" disabled>
    <option value="carrot">Carrots</option>
    <option value="zucchini">Zucchini</option>
  </optgroup>
</select>

オプショングループを使用する場合、すべてのオプションをグループに含める必要はありません。同様に、オプショングループを無効にすると、グループ内のすべてのオプションが無効になり、無効なグループ内の1つのオプションを手動で再び有効にすることはできません。

オプション

選択メニュー内のオプションは、ユーザーが選択するものです。オプションの通常の構文は次のとおりです。

<option>Some Option</option>

しかし、 <option>要素自体の内部のテキストは必ずしも使用されるわけではなく、指定されていない属性のデフォルト値となることに注意することが重要です。

オプションの実際の外観および機能を制御する属性は、 valueおよびlabel 。ラベルは、ドロップダウンメニューに表示されるテキスト（あなたが見ているものとクリックして選択するもの）を表します。値は、フォームの提出とともに送信されるテキストを表します。これらの値のいずれかが省略された場合、代わりに要素内のテキストが値として使用されます。したがって、上に示した例は、これに "展開"することができます：

<option label="Some Option" value="Some Option">

実際にメニュー内にオプションを作成する必要はない内部テキストと終了タグの省略に注意してください。それらが含まれていれば、両方の属性が既に指定されていてテキストが必要でないため、内部のテキストは無視されます。しかし、あなたはこのように多くの人が書いているとは思わないでしょう。最も一般的な方法は、サーバーに送信される値と、最終的にはラベル属性になる内部テキストです。

<option value="option1">Some Option</option>

デフォルトでオプションを選択する

また、 selected属性をメニューに追加することで、メニューで選択する特定のオプションをデフォルトで指定することもできます。デフォルトでは、メニューで選択されているオプションが指定されていない場合、レンダリング時にメニューの最初のオプションが選択されます。複数のオプションにselectedアトリビュートがアタッチされている場合、そのアトリビュートを持つメニューにある最後のオプションは、デフォルトで選択されたものになります。

<option value="option1" selected>Some option</option>

複数オプションの選択メニューで属性を使用している場合、属性を持つすべてのオプションがデフォルトで選択され、属性を持つオプションがない場合は選択されません。

<select multiple>
  <option value="option1" selected>Some option</option>
  <option value="option2" selected>Some option</option>   
</select>

データリスト

<datalist>タグの事前定義されたオプションのリストを指定する<input>要素。 <input>要素に "autocomplete"機能を提供します。ユーザーは、オプションのドロップダウンリストを表示します。

<input list="Languages">

<datalist id="Languages">
  <option value="PHP">
  <option value="Perl">
  <option value="Python">
  <option value="Ruby">
  <option value="C+">
</datalist>

ブラウザのサポート