select 要素

4.10.7 select 要素

カテゴリー:
フロー・コンテント
フレージング・コンテント
インタラクティブ・コンテント
リスト対象で、ラベル付け可能で、サブミット可能で、リセット可能で、再関連付け可能フォーム関連要素
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フレージング・コンテントが期待される場所
コンテントモデル:
0 個以上の option, optgroup, スクリプトサポート 要素
コンテント属性:
グローバル属性
autofocus - ページがロードされた時に自動的にフォームコントロールにフォーカスを当てる
disabled - フォームコントロールを無効にするかどうか
form - form 要素にコントロールを関連付ける
multiple - 複数の値を許すかどうか
name - フォームのサブミットform.elements API で使うフォームコントロールの名前
required - フォームのサブミットでコントロールが必須かどうか
size - コントロールのサイズ
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
listbox (デフォルト - 指定不要) or menu.
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
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 Element? item(unsigned long index);
  HTMLOptionElement? namedItem(DOMString name);
  void add((HTMLOptionElement or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null);
  void remove(); // ChildNode overload
  void remove(long index);
  setter creator void (unsigned long index, HTMLOptionElement? option);

  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(DOMString error);

  readonly attribute NodeList labels;
};

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

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

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

select 要素の表示サイズとは、この要素の size 属性の値に非負整数パース規則を適用した結果のことです。ただし、この要素がその属性を持ち、そのパースが成功した場合に限ります。これらの規則をこの属性の値に適用して成功しなかったら、または、size 属性が存在しなかった場合、この要素に multiple 属性が存在するなら、この要素の表示サイズは 4 となります。そうでなければ 1 となります。

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

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

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

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

制約バリデーション: この要素に required 属性が指定され、かつ、select 要素の選択肢リストoption 要素のいずれにも選択状態が true にセットされていないか、select 要素の選択肢リスト選択状態が true にセットされた option 要素が 1 つしかないにもかかわらずそれがプレースホルダー・ラベル・オプションである、のいずれかなら、その要素は未入力状態に陥っていることになります。

multiple 属性が存在せず、この要素が無効でないなら、ユーザーエージェントは、選択肢リスト無効でない option 要素をユーザーが選択できるようにするべきです。option 要素が選択(クリックしたり、値の変更後に要素からフォーカスを外すなどのメカニズムを通して)される際に、関連のユーザー操作のイベントがキューイングされる前(たとえば click イベントの前)に、ユーザーエージェントは選択された option 要素の選択状態を true にセットし、その汚染状態を true にセットしてから、select アップデート通知を送信しなければいけません。

multiple 属性が存在しないなら、select 要素の選択肢リストoption 要素の選択状態が true にセットされるとき、そして、true にセットされた選択状態を持つ option 要素が select 要素の選択肢リストに追加されるときは常に、ユーザーエージェントは、その選択肢リストにある他の option 要素の選択状態をすべて false にセットしなければいけません。

multiple 属性が存在せず、この要素の表示サイズが 1 より大きいなら、ユーザーエージェントは、選択状態が true の option 要素があれば、ユーザーがそれらの選択を外す要求を出せるようにするべきです。ユーザーエージェントにこの要求が伝えられる際に、関連のユーザー操作のイベントがキューイングされる前(たとえば click イベントの前)に、ユーザーエージェントはその option 要素の選択状態を false にセットし、その汚染状態を true にセットしてから、select アップデート通知を送信しなければいけません。

ノードが挿入されたりノードが削除されたりする際に、1 つ以上の option 要素が増えたり減ったりするようなことが起こるなら、または、選択肢リストoption 要素がリセットを要求するなら、その際に、その select 要素の multiple 属性が存在せず、その select 要素の表示サイズは 1 であり、かつ、その select 要素の選択肢リストoption 要素がいずれも選択状態が true にセットされることがないなら、ユーザーエージェントは、選択肢リスト無効でない option 要素があれば、そのうちツリー順で最初の option 要素の選択状態を true にセットしなければいけません。

multiple 属性が存在し、この要素が無効でないなら、ユーザーエージェントは、ユーザーが、選択肢リスト無効でない option 要素の選択状態切り替えることができるようにするべきです。要素が切り替えられる(クリックなどのメカニズムを通して)際に、関連のユーザー操作イベントがキューイングされる前(たとえば関連の click イベントの前)に、その option 要素の選択状態は変更されなければならず(true から false へ、または、false から true へ)、その要素の汚染状態を true にセットしてから、select アップデート通知を送信しなければいけません。

ユーザーエージェントがselect アップデート通知を送信することになったとき、まず、その select 要素で input という名前のバブリングするシンプルなイベントを発出するタスクをキューイングし、それから、その select 要素で change という名前のバブリングするシンプルなイベントを発出します。タスクソースにはユーザーインタラクション・タスクソースを使います。

select 要素のリセット・アルゴリズムは、この要素の選択肢リストにあるすべての option 要素を走査し、option 要素が selected 属性を持つなら、その選択状態を true にセットし、そうでなければ、false にセットし、その汚染状態を false にセットしてから、その option 要素にリセットを要求することです。

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

無効でない select 要素は、ミュータブルです。

select . type

該当の要素が multiple 属性を持てば "select-multiple" を返し、そうでなければ "select-one" を返します。

select . options

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

select . length [ = value ]

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

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

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

element = select . item(index)
select[index]

選択肢リストから、インデックスが index の項目を返します。項目はツリー順に並べられます。

element = select . namedItem(name)

選択肢リストから、ID または namename となる項目を返します。

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

select . add(element [, before ])

before によって与えられたノードの前に element を挿入します。

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

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

element が挿入先の要素の祖先だった場合は、このメソッドは HierarchyRequestError 例外を投げます。

select . selectedOptions

選択肢リストのうち選択されている HTMLCollection を返します。

select . selectedIndex [ = value ]

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

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

select . value [ = value ]

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

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

type IDL 属性は、取得時においては、multiple 属性が存在しなければ文字列 "select-one" を返し、multiple 属性が存在すれば文字列 "select-multiple" を返さなければいけません。

options IDL 属性は、select ノードをルートとした HTMLOptionsCollection を返さなければいけません。そのフィルターは、選択肢リストの要素に一致します。

options コレクションはまた、HTMLSelectElement オブジェクトを反映します。添え字プロパティ・インデックスはいかなるときでも、その時点で options 属性によって返されるオブジェクトが添えるインデックスとなります。

length IDL 属性は、options のコレクションによって表されるノードの数を返さなければいけません。セット時においては、options コレクションの同じ名前の属性と同様に作用しなければいけません。

item(index) メソッドは、options コレクションの同じ名前のメソッドに同じ引数を与えて呼び出した際に返される値を返さなければいけません。

namedItem(name) メソッドは、options コレクションの同じ名前のメソッドに同じ引数を与えて呼び出した際に返される値を返さなければいけません。

ユーザーエージェントが指定のプロパティ・インデックス index に対して、新たな値 value になるよう、新たなインデックス付きプロパティの値をセットすることになったとき、options コレクションの新たな値 value になるよう、指定のプロパティ・インデックス index となる新たなインデックス付きプロパティの値をセットしなければいけません。

同様に、add() メソッドは、その同じ options コレクションの同名のメソッドと同様に作用しなければいけません。

remove() メソッドは、引数を持つ場合は、その同じ options コレクションの同名のメソッドと同様に作用しなければいけません。そして、引数を持たない場合は、HTMLSelectElement の継承元の祖先にあたるインタフェース Element に実装されている ChildNode インタフェースの同名のメソッドと同様に作用しなければいけません。

selectedOptions IDL 属性は、select ノードをルートとした HTMLCollection を返さなければいけません。そのフィルターは、選択肢リストのうち、選択状態が true にセットされた要素に一致します。

selectedIndex IDL 属性は、取得時においては、選択肢リストのうち、選択状態が true にセットされた option 要素があれば、そのうちのツリー順で最初のインデックスを返さなければいけません。一つもなければ -1 を返さなければいけません。

セット時においては、selectedIndex 属性は、選択肢リストのすべての option 要素の選択状態を false にセットしてから、選択肢リストのうちインデックスが指定の新たな値となる option 要素があれば、その選択状態を true にセットし、そして、その汚染状態を true にセットしなければいけません。

これによって、選択状態が true にセットされた要素は 1 つもないという結果になりえます。たとえ、select 要素が multiple 属性を持たず、表示サイズが 1 だった場合でもです。

value IDL 属性は、取得時においては、選択肢リストのうち、選択状態が true にセットされた option 要素があれば、そのうちのツリー順で最初のを返さなければいけません。一つもなければ空文字列を返さなければいけません。

セット時においては、value 属性は、選択肢リストのすべての option 要素の選択状態を false にセットしてから、選択肢リストのうちが指定の新たな値と等しい option 要素があれば、その選択状態を true に、そして、その汚染状態を true にセットしなければいけません。

これによって、選択状態が true にセットされた要素は 1 つもないという結果になりえます。たとえ、select 要素が multiple 属性を持たず、表示サイズが 1 だった場合でもです。

multiple, required, size IDL 属性は、それぞれ同じ名前のコンテント属性を反映しなければいけません。size IDL 属性のデフォルト値は 0 です。

歴史的な理由から、size IDL 属性のデフォルト値は、実際に使われているサイズを返しません。size コンテント属性が無い場合は、multiple 属性の存在に応じて 1 または 4 になります。

willValidate, validity, validationMessage IDL 属性、そして、checkValidity()setCustomValidity() メソッドは、制約バリデーション API の一部です。labels IDL 属性は、この要素の label のリストを提供します。autofocus, disabled, name IDL 属性は、この要素の forms API の一部です。

次の例は、select 要素が如何にしてユーザーに選択肢のセットを提供できるのかを示しています。ここでは、ユーザーは一つの選択肢しか選択することができません。デフォルトの選択肢は事前に選択された状態にしてあります。

<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>

デフォルトの選択肢がないとき、プレースホルダーが代わりに使えます:

<select name="unittype" required>
 <option value=""> Select unit type </option>
 <option value="1"> Miner </option>
 <option value="2"> Puffer </option>
 <option value="3"> Snipey </option>
 <option value="4"> Max </option>
 <option value="5"> Firebot </option>
</select>

ここでは、ユーザーが複数選択できる選択肢のセットが提供されていますデフォルトでは、5 つの選択肢すべてが選択された状態になっています。

<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>

ときには、ユーザーは 1 つ以上の項目を選択しなければなりません。この例は、そういった事例を示しています。

<p>Select the songs from that you would like on your Act II Mix Tape:</p>
<select multiple required name="act2">
 <option value="s1">It Sucks to Be Me (Reprise)
 <option value="s2">There is Life Outside Your Apartment
 <option value="s3">The More You Ruv Someone
 <option value="s4">Schadenfreude
 <option value="s5">I Wish I Could Go Back to College
 <option value="s6">The Money Song
 <option value="s7">School for Monsters
 <option value="s8">The Money Song (Reprise)
 <option value="s9">There's a Fine, Fine Line (Reprise)
 <option value="s10">What Do You Do With a B.A. in English? (Reprise)
 <option value="s11">For Now
</select>

※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-select-element