4.10.9 select 要素

カテゴリー

フロー・コンテンツ

フレージング・コンテンツ

インタラクティブ・コンテンツ

リスト化要素で、ラベル付け可能で、サブミット可能でリセット可能なフォーム関連要素

この要素を使うことができるコンテキスト：

フレージング・コンテンツが期待される場所

コンテンツ・モデル：

0 個以上の option または optgroup 要素

コンテンツ属性：

グローバル属性

autofocus

disabled

form

multiple

name

required

size

DOMインタフェース：

interface HTMLSelectElement : HTMLElement {
           attribute boolean autofocus;
           attribute boolean disabled;
  readonly attribute HTMLFormElement form;
           attribute boolean multiple;
           attribute DOMString name;
           attribute boolean required;
           attribute unsigned long size;

  readonly attribute DOMString type;

  readonly attribute HTMLOptionsCollection options;
           attribute unsigned long length;
  getter any item(in unsigned long index);
  any namedItem(in DOMString name);
  void add(in HTMLElement element, in optional HTMLElement before);
  void add(in HTMLElement element, in long before);
  void remove(in long index);

  readonly attribute HTMLCollection selectedOptions;
           attribute long selectedIndex;
           attribute DOMString value;

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(in DOMString error);

  readonly attribute NodeList labels;
};

select 要素は、選択肢のセットの中から選択させるためのコントロールを表します。

multiple 属性は論理属性です。この属性が存在すれば、その select 要素は、選択肢リストから 0 個以上の選択肢を選択できるコントロールを表します。この属性がなければ、その select 要素は、選択肢リストから1個だけの選択肢を選択できるコントロールを表します。

size 属性は、ユーザーに表示する選択肢の数を与えます。size 属性が指定されたら、その値は 0 より大きい妥当な非負整数でなければいけません。multiple 属性が存在すれば、size 属性のデフォルト値は 4 となります。multiple 属性がなければ、size 属性のデフォルト値は 1 となります。

select 要素の選択肢リストとは、その select 要素の子要素となるすべての option 要素、そして、その select 要素の子要素となるすべての optgroup 要素の子要素となるすべての option 要素から、ツリー順で構成されたものです。

required 属性は、論理属性です。指定されたら、ユーザーは、フォームをサブミットする前に、値を選択することを求められます。

もし、select 要素に required 属性が指定され、multiple 属性が指定されず、表示サイズ が 1 となる場合、該当の select 要素の選択肢リストに option 要素が存在し、その最初の値が空文字列で、その option 要素の親ノードが該当の select 要素（optgroup 要素ではない）なら、その option が、該当の select 要素の プレースホルダー・ラベル・オプション になります。

もし、select 要素に required 属性が指定され、multiple 属性が指定されず、表示サイズ が 1 となる場合、該当の select 要素はプレースホルダー・ラベル・オプションを持たなければいけません。

form 属性は、明示的に select 要素をフォーム・オーナーと結びづけるために使われます。name 属性は、その要素の名前を表します。disabled 属性は、そのコントロールを非インタラクティブにして、値がサブミットされないようにするために使われます。autofocus 属性は、フォーカスを制御します。

select . type

要素に multiple 属性があれば "select-multiple" を返し、なければ "select-one" を返します。

select . options

選択肢リストの HTMLOptionsCollection を返します。

select . length [ = value ]

選択肢リストにある要素の数を返します。

より小さい数字をセットすると、その select 要素の option 要素の数が切り詰められます。

より大きい数字をセットすると、その select 要素に空の新たな option 要素が追加されます。

element = select . item(index)

select[index]

選択肢リストから、index に指定されたインデックス位置にある項目を返します。項目はツリー順にソートされます。

index が範囲外であれば、null を返します。

element = select . namedItem(name)

選択肢リストから、ID または名前 name を持った項目を返します。

複数の項目が当てはまる場合は、該当の要素すべてを含んだ NodeList を返します。

指定の ID を持った要素が見つからなければ null を返します。

select . add(element [, before ])

before に指定されたノードの前に element を挿入します。

before 引数には数字を指定することができます。その場合、element はその数字を持った項目の前に挿入されます。before 引数が選択肢リストの要素の場合は、element はその要素の前に挿入されます。

before が省略、または、null 、または、範囲外の数字だった場合は、element はリストの最後に追加されるでしょう。

このメソッドは、element が挿入先の要素の祖先だったら、HIERARCHY_REQUEST_ERR 例外を投げるでしょう。element が option 要素または optgroup 要素でなければ、このメソッドは何もしません。

select . selectedOptions

選択肢リストから選択済みの HTMLCollection を返します。

select . selectedIndex [ = value ]

選択された項目があれば、その最初の項目のインデックスを返します。なければ -1 を返します。

値をセットして、選択を変更することができます。

select . value [ = value ]

選択された項目があれば、その最初の項目の値を返します。何も選択されていなければ、空文字列を返します。

値をセットして、選択を変更することができます。

<p>
 <label for="unittype">Select unit type:</label>
 <select id="unittype" name="unittype">
  <option value="1"> Miner </option>
  <option value="2"> Puffer </option>
  <option value="3" selected> Snipey </option>
  <option value="4"> Max </option>
  <option value="5"> Firebot </option>
 </select>
</p>

<p>
 <label for="allowedunits">Select unit types to enable on this map:</label>
 <select id="allowedunits" name="allowedunits" multiple>
  <option value="1" selected> Miner </option>
  <option value="2" selected> Puffer </option>
  <option value="3" selected> Snipey </option>
  <option value="4" selected> Max </option>
  <option value="5" selected> Firebot </option>
 </select>
</p>

※ 原文：http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-select-element