HTMLSelectElement
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTMLSelectElement
インターフェイスは HTML の <select>
要素を表します。これらの要素は HTMLElement
インターフェイスを通じて他の HTML 要素のすべてのプロパティとメソッドも共有します。
プロパティ
このインターフェイスには HTMLElement
、Element
、Node
から継承したプロパティがあります。
HTMLSelectElement.disabled
-
論理値で、 HTML の
disabled
属性を反映し、コントロールが無効か否か、つまりクリックを受け付けるかどうかを示します。 HTMLSelectElement.form
読取専用-
HTMLFormElement
で、この要素が関連付けられているフォームを反映します。この要素が<form>
要素に関連付けられていなければ、null
を返します。 HTMLSelectElement.labels
読取専用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
が変化したときに発行されます。
例
選択された選択肢についての情報を得る
/* 以下の 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
イベントのドキュメントで提供されている例を参照してください。
仕様書
Specification |
---|
HTML Standard # htmlselectelement |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- このインターフェイスを実装している HTML 要素:
<select>