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 要素のすべてのプロパティとメソッドも共有します。
プロパティ
このインターフェイスには 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 # htmlselectelement |
ブラウザーの互換性
Loading…
関連情報
- このインターフェイスを実装している HTML 要素:
<select>