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.
* Some parts of this feature may have varying levels of support.
HTMLSelectElement
インターフェイスは HTML の 要素を表します。これらの要素は
HTMLElement
インターフェイスを通じて他の HTML 要素のすべてのプロパティとメソッドも共有します。
プロパティ
このインターフェイスには HTMLElement
、Element
、Node
から継承したプロパティがあります。
HTMLSelectElement.disabled
-
論理値で、 HTML の
disabled
属性を反映し、コントロールが無効か否か、つまりクリックを受け付けるかどうかを示します。 HTMLSelectElement.form
読取専用-
HTMLFormElement
で、この要素が関連付けられているフォームを反映します。この要素が要素に関連付けられていなければ、
null
を返します。 HTMLSelectElement.labels
読取専用-
NodeList
で、この要素に関連付けられた要素を表します。
HTMLSelectElement.length
HTMLSelectElement.multiple
-
論理値で、 HTML の
multiple
要素を反映し、複数の項目を選択することができるかどうかを示します。 HTMLSelectElement.name
-
文字列で、 HTML の
name
属性を反映し、サーバーおよび DOM 検索機能で使用されるこのコントロールの名前が入ります。 HTMLSelectElement.options
読取専用-
HTMLOptionsCollection
で、この要素に含まれる一連の要素 (
HTMLOptionElement
) を表します。 HTMLSelectElement.required
-
論理値で、 HTML の
required
属性を反映し、ユーザーがフォームを送信する前に値を選択する必要があることを示します。 HTMLSelectElement.selectedIndex
HTMLSelectElement.selectedOptions
読取専用-
HTMLCollection
で、選択されているすべての要素を反映します。
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()
-
この
要素の選択肢の集合から項目を取得します。角括弧または括弧で序数を指定することで、明示的にこのメソッドを呼び出さずに項目にアクセスすることもできます。
HTMLSelectElement.namedItem()
-
選択肢の集合から指定した名前で項目を取得します。名前の文字列は option ノードの
id
またはname
属性と一致させることができます。角括弧または括弧で名前を指定することで、明示的にこのメソッドを呼び出さずに項目にアクセスすることもできます。 HTMLSelectElement.remove()
-
この
select
要素の選択肢の集合から、指定された序数の要素を削除します。 HTMLSelectElement.reportValidity()
-
このメソッドは、この要素の制約の問題があれば、ユーザーに報告します。問題があれば、キャンセル可能な
invalid
イベントを要素で発生させ、false
を返します。問題がなければ、true
を返します。 HTMLSelectElement.setCustomValidity()
-
選択要素の独自の検証メッセージを指定されたメッセージに設定します。空文字列を使用すると、要素に独自の検証エラーがないことを示します。
showPicker()
-
オプションピッカーを表示します。
イベント
このインターフェイスには HTMLElement
、Element
、Node
から継承したイベントがあります。
これらのイベントを待ち受けするには addEventListener()
を使用するか、イベントリスナーをこのインターフェイスの onイベント名
プロパティに代入するかしてください。
例
選択された選択肢についての情報を得る
/* 以下の HTML があると仮定します
*/
const select = document.getElementById("s");
// 選択された選択肢の序数を返す
console.log(select.selectedIndex); // 1
// 選択された選択肢の値を返す
console.log(select.options[select.selectedIndex].value); // Second
ユーザーの選択の変更を追跡するのであれば、 change
イベントが に発生するのを監視するほうがより良い方法です。これは値が変化したときに通知され、必要なものを更新することができます。詳しくは、
change
イベントのドキュメントで提供されている例を参照してください。
仕様書
Specification |
---|
HTML # htmlselectelement |