HTMLSelectElement - Web API | MDN

Toggle sidebar

Theme

OS default
Light
Dark

日本語

Remember language Learn more

HTMLSelectElement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

* Some parts of this feature may have varying levels of support.

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

EventTarget Node Element HTMLElement HTMLSelectElement

プロパティ

このインターフェイスには HTMLElement、Element、Node から継承したプロパティがあります。

HTMLSelectElement.disabled

論理値で、 HTML の disabled 属性を反映し、コントロールが無効か否か、つまりクリックを受け付けるかどうかを示します。

HTMLSelectElement.form 読取専用

HTMLFormElement で、この要素が関連付けられているフォームを反映します。この要素が <form> 要素に関連付けられていなければ、 null を返します。

HTMLSelectElement.labels 読取専用

NodeList で、この要素に関連付けられた <label> 要素を表します。

HTMLSelectElement.length

unsigned long で、 <option> 要素がこの select 要素に含まれる数です。

HTMLSelectElement.multiple

論理値で、 HTML の multiple 要素を反映し、複数の項目を選択することができるかどうかを示します。

HTMLSelectElement.name

文字列で、 HTML の name 属性を反映し、サーバーおよび DOM 検索機能で使用されるこのコントロールの名前が入ります。

HTMLSelectElement.options 読取専用

HTMLOptionsCollection で、この要素に含まれる一連の <option> 要素 (HTMLOptionElement) を表します。

HTMLSelectElement.required

論理値で、 HTML の required 属性を反映し、ユーザーがフォームを送信する前に値を選択する必要があることを示します。

HTMLSelectElement.selectedIndex

long で、最初に選択された <option> 要素の序数を反映します。 -1 の値は要素が選択されていないことを示します。

HTMLSelectElement.selectedOptions 読取専用

HTMLCollection で、選択されているすべての <option> 要素を反映します。

HTMLSelectElement.size

long で、 HTML の size 属性を反映し、コントロール内で見える項目の数が入ります。既定値は、 multiple が true でなければ 1 で、そうでなければ 4 です。

HTMLSelectElement.type 読取専用

文字列で、フォームコントロールの型を表します。 multiple が true である場合は "select-multiple" を返し、そうでなければ "select-one" を返します。

HTMLSelectElement.validationMessage 読取専用

文字列で、（もしあれば）制約検証でコントロールが合格しなかった場合のローカライズされたメッセージを表現します。この属性はコントロールが制約検証の対象にならない場合 (willValidate が false の場合) や、制約を満たしている場合は空文字列になります。

HTMLSelectElement.validity 読取専用

ValidityState で、このボタンがある妥当性の状態を表します。

HTMLSelectElement.value

文字列で、このフォームコントロールの値を反映します。選択されている option 要素があれば最初のものの value プロパティを返し、そうでなければ空文字列を返します。

HTMLSelectElement.willValidate 読取専用

論理値で、ボタンが制約検証の候補になるかどうかを示します。制約検証が阻止される場合は false となります。

メソッド

このインターフェイスには HTMLElement、Element、Node から継承したメソッドがあります。

HTMLSelectElement.add()

要素をこの select 要素にある option 要素の集合に加えます。

HTMLSelectElement.checkValidity()

要素に何らかの制約があるか、それを満たしているかをチェックします。要素が制約に違反していた場合、ブラウザーはキャンセル可能な invalid イベントを要素に送ります（そして false を返します）。

HTMLSelectElement.item()

この <select> 要素の選択肢の集合から項目を取得します。角括弧または括弧で序数を指定することで、明示的にこのメソッドを呼び出さずに項目にアクセスすることもできます。

HTMLSelectElement.namedItem()

選択肢の集合から指定した名前で項目を取得します。名前の文字列は option ノードの id または name 属性と一致させることができます。角括弧または括弧で名前を指定することで、明示的にこのメソッドを呼び出さずに項目にアクセスすることもできます。

HTMLSelectElement.remove()

この select 要素の選択肢の集合から、指定された序数の要素を削除します。

HTMLSelectElement.reportValidity()

このメソッドは、この要素の制約の問題があれば、ユーザーに報告します。問題があれば、キャンセル可能な invalid イベントを要素で発生させ、 false を返します。問題がなければ、 true を返します。

HTMLSelectElement.setCustomValidity()

選択要素の独自の検証メッセージを指定されたメッセージに設定します。空文字列を使用すると、要素に独自の検証エラーがないことを示します。

showPicker()

オプションピッカーを表示します。

イベント

このインターフェイスには HTMLElement、Element、Node から継承したイベントがあります。

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

change イベント

ユーザーが選択肢を選択したときに発行されます。

input イベント

<input>, <select>, <textarea> の各要素の value が変化したときに発行されます。

例

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

js
/* 以下の HTML があると仮定します
<select id='s'>
    <option>First</option>
    <option selected>Second</option>
    <option>Third</option>
</select>
*/

const select = document.getElementById("s");

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

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

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