HTMLSelectElement

HTMLSelectElement インターフェイスは HTML の <select> 要素を表します。これらの要素は HTMLElement インターフェイスを通じて他の HTML 要素のすべてのプロパティとメソッドも共有します。

プロパティ

このインターフェイスは HTMLElement と、 Element および Node からプロパティを継承しています。

HTMLSelectElement.autofocus
Boolean で、 HTML の autofocus 属性を反映し、ページが読み込みの際に、ユーザーが異なるコントロールに入力するなどで上書きをしない限り、コントロールが入力フォーカスを持つべきかどうかを示します。文書中のフォーム関連要素の中で、この属性を指定できるのは 1 つだけです。
HTMLSelectElement.disabled (en-US)
Boolean で、 HTML の disabled 属性を反映し、コントロールが無効か否か、つまりクリックを受け付けるかどうかを示します。
HTMLSelectElement.form (en-US)読取専用
HTMLFormElement で、この要素が関連付けられているフォームを反映します。この要素が <form> 要素に関連付けられていなければ、 null を返します。
HTMLSelectElement.labels (en-US)読取専用
NodeList で、この要素に関連付けられた <label> 要素を表します。
HTMLSelectElement.length
unsigned long で、 <option> 要素がこの select 要素に含まれる数です。
HTMLSelectElement.multiple
Boolean で、 HTML の multiple 要素を反映し、複数の項目を選択することができるかどうかを示します。
HTMLSelectElement.name
DOMString で、 HTML の name 属性を反映し、サーバーおよび DOM 検索機能で使用されるこのコントロールの名前が入ります。
HTMLSelectElement.options読取専用
HTMLOptionsCollection (en-US) で、この要素に含まれる一連の <option> 要素を表します。
HTMLSelectElement.required
Boolean で、 HTML の required 属性を反映し、ユーザーがフォームを送信する前に値を選択する必要があることを示します。
HTMLSelectElement.selectedIndex (en-US)
long で、最初に選択された <option> 要素の序数を反映します。 -1 の値は要素が選択されていないことを示します。
HTMLSelectElement.selectedOptions (en-US)読取専用
HTMLCollection で、選択されているすべての <option> 要素を反映します。
HTMLSelectElement.size
long で、 HTML の size 属性を反映し、コントロール内で見える項目の数が入ります。既定値は、 multipletrue でなければ 1 で、そうでなければ 4 です。
HTMLSelectElement.type (en-US)読取専用
DOMString で、フォームコントロールの型を表します。 multipletrue である場合は select-multiple を返し、そうでなければ select-one を返します。
HTMLSelectElement.validationMessage読取専用
DOMString で、 (もしあれば) 制約検証でコントロールが合格しなかった場合のローカライズされたメッセージを表現します。この属性はコントロールが制約検証の対象にならない場合 (willValidatefalse の場合) や、制約を満たしている場合は空文字列になります。
HTMLSelectElement.validity読取専用
ValidityState で、このボタンがある妥当性の状態を表します。
HTMLSelectElement.value
DOMString で、このフォームコントロールの値を反映します。選択されている option 要素があれば最初のものの value プロパティを返し、そうでなければ空文字列を返します。
HTMLSelectElement.willValidate読取専用
Boolean で、ボタンが制約検証の候補になるかどうかを示します。制約検証が阻止される場合は false となります。

メソッド

このインターフェイスは HTMLElement と、 Element および Node からメソッドを継承しています。

HTMLSelectElement.add() (en-US)
要素をこの select 要素にある option 要素の集合に加えます。
HTMLSelectElement.blur() これは廃止された API であり、動作は保証されていません。
この要素から入力フォーカスを外します。このメソッドは HTMLElement で実装されました
HTMLSelectElement.checkValidity() (en-US)
要素に何らかの制約があるか、それを満たしているかをチェックします。要素が制約に違反していた場合、ブラウザーはキャンセル可能な invalid イベントを要素に送ります (そして false を返します)。
HTMLSelectElement.focus() これは廃止された API であり、動作は保証されていません。
Gives input focus to this element. このメソッドは HTMLElement で実装されました
HTMLSelectElement.item()
この <select> 要素の選択肢の集合から項目を取得します。配列風に角括弧または括弧で序数を指定することで、明示的にこのメソッドを呼び出さずに項目にアクセスすることもできます。
HTMLSelectElement.namedItem() (en-US)
選択肢の集合から指定した名前で項目を取得します。名前の文字列は option ノードの id または name 属性と一致させることができます。配列風に角括弧または括弧で名前を指定することで、明示的にこのメソッドを呼び出さずに項目にアクセスすることもできます。
HTMLSelectElement.remove() (en-US)
この select 要素の選択肢の集合から、指定された序数の要素を削除します。
HTMLSelectElement.reportValidity()
このメソッドは、この要素の制約の問題があれば、ユーザーに報告します。問題があれば、キャンセル可能な invalid イベントを要素で発生させ、 false を返します。問題がなければ、 true を返します。
HTMLSelectElement.setCustomValidity() (en-US)
選択要素の独自の検証メッセージを指定されたメッセージに設定します。要素に独自の検証エラーがないことを示すには、空文字列を使用してください。

イベント

これらのイベントを待ち受けするには addEventListener() を使用するか、イベントリスナーをこのインターフェイスの onイベント名 プロパティに代入するかしてください。

input イベント
<input>, <select>, <textarea> の各要素の value が変化したときに発生します。

選択された選択肢についての情報を得る

/* 以下の HTML があることを想定する
<select id='s'>
    <option>First</option>
    <option selected>Second</option>
    <option>Third</option>
</select>
*/

var select = document.getElementById('s');

// 選択された選択肢の序数を返す
console.log(select.selectedIndex); // 1

// 選択された選択肢の値を返す
console.log(select.options[select.selectedIndex].value) // Second

ユーザーの選択の変更を追跡するのであれば、 change イベントが <select> に発生するのを監視するほうがより良い方法です。これは値が変化したときに通知され、必要なものを更新することができます。詳しくは、 change イベントのドキュメントで提供されている例を参照してください。

仕様書

仕様書 状態 備考
HTML Living Standard
HTMLSelectElement の定義
現行の標準 HTML5 の最新のスナップショットから、 autocomplete プロパティと reportValidity() メソッドを追加。
HTML5
HTMLSelectElement の定義
勧告 HTML Living Standard のスナップショット。
autofocus, form, required, labels, selectedOptions, willValidate, validity, validationMessage の各プロパティを追加。
tabindex プロパティと blur() および focus() メソッドを HTMLElement へ移動。
item(), namedItem(), checkValidity() setCustomValidity() の各メソッドを追加。
Document Object Model (DOM) Level 2 HTML Specification
HTMLSelectElement の定義
廃止 optionsHTMLOptionsCollection (en-US) を返すようになった。
lengthunsigned long を返すようになった。
Document Object Model (DOM) Level 1 Specification
HTMLSelectElement の定義
廃止 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報

  • このインターフェイスを実装している HTML 要素: <select>