備忘録的プログラミングリファレンス

HTMLSelectElement インターフェイス

 HTMLSelectElement インターフェイスは、選択肢のあるデータ入力が作成できる <form> の入力部品である <select> エレメントを定義したインターフェイスです。
 HTMLSelectElement インターフェイスはプロパティメソッドイベントを定義しています。

HTMLSelectElement 継承図

プロパティ(Properties)

 HTMLSelectElement インターフェイスは 以下の独自のプロパティをもちます。HTMLElement インターフェイス のプロパティも継承しています。

プロパティ概要分類
.autofocus autofocus 属性で web ページの読み込み時にフォーカスをあてるか/否か。Boolean 型
.disabledデータを送信するか/否か。 true では入力された値は送信されない。薄い色で表示される。Boolean 型
.form <select> エレメントが属する HTMLFormElement のハンドラー。なければ null
.labels関連付けられた <label> を NodeList で返す
.length子エレメントである <option> の数を返す。unsigned long 型
.multiple複数の選択を可能にする multiple 属性。Boolean 型
.name name 属性の設定と取得。 DOMString 型
.options子エレメントである <option> のリスト HTMLOptionsCollection を返す
.required値の入力が必須。required 属性が該当。 Boolean 型
.selectedIndex選択された <option> の序数を返す
.selectedOptions選択されている <option> のリストを HTMLCollection で返す
.typeタイプ名を返す。DOMString 型。"select-one" または "select-multiple"
.validationMessage入力値が制約内ではない場合のメッセージ。 DOMString 型
.validity入力値が制約内であるかの検証結果を表す ValidityState オブジェクトを返す
.value 現在の選択されている値を返す。DOMString 型
.willValidate入力値が制約内であるかを検証する対象であるか/否か。 Boolean 型

 以下は、HTMLElement インターフェイスのプロパティと継承したプロパティです。参考にしてください。

Nodeのプロパティ一覧 

タイプ名(ハンドラー名)概要分類

Elementのプロパティ一覧 

タイプ名(ハンドラー名)概要分類

HTMLElementのプロパティ一覧 

タイプ名(ハンドラー名)概要分類

メソッド(Methods)

 HTMLSelectElement インターフェイスは 以下の独自のメソッドがあります。さらに継承したメソッドがあります。

メソッド概要分類
.add()引数の <option> エレメントを子エレメントとして加える。
.checkValidity()入力値が制約内であるかを検証する。 Boolean 型
.item()引数の序数に該当する <option> エレメントを返す
.namedItem()引数の name または id に該当する <option> エレメントを返す
.remove()引数の序数に該当する <option> エレメントを削除する
.reportValidity()入力値が制約内であるかを検証しメッセージを出力する。 Boolean 型
.setCustomValidity()入力値が制約外であるエラーを発生させることができる。引数にエラーメッセージを指定し実行するとエラーが発生する

 HTMLSelectElement インターフェイスが継承したHTMLElement インターフェイスのメソッドです。 NodeElement インターフェイスのメソッドを含みます。使えないものもあるので参考してください。

Nodeのメソッド一覧 

タイプ名(ハンドラー名)概要分類

Elementのメソッド一覧 

タイプ名(ハンドラー名)概要分類

HTMLElementのメソッド一覧 

タイプ名(ハンドラー名)概要分類

イベント(Event)

 HTMLSelectElement にイベントハンドラーを定義する方法には以下があります。

HTMLSelectElement.addEventListener( 'change', ()=>{...} )
HTMLSelectElement.onchange = function(){...}
<button onchange = "..." >

 イベントについてはEventを参照してください。 イベントの監視についてはEventTargetが担っています。

 以下は、HTMLSelectElement が継承しているイベント一覧です。使えないものもあるので参考にしてください。

GlobalEventHandlersのイベント一覧 

タイプ名(ハンドラー名)概要分類

DocumentAndElementEventHandlersのイベント一覧 

タイプ名(ハンドラー名)概要分類

HTMLElementのイベント一覧 

タイプ名(ハンドラー名)概要分類