HTMLSelectElement

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

プロパティ

このインターフェイスは HTMLElement と、 Element および Node からプロパティを継承しています。

HTMLSelectElement.autofocus
Boolean で、 HTML の autofocus 属性を反映し、ページが読み込みの際に、ユーザーが異なるコントロールに入力するなどで上書きをしない限り、コントロールが入力フォーカスを持つべきかどうかを示します。文書中のフォーム関連要素の中で、この属性を指定できるのは1つだけです。
HTMLSelectElement.disabled
Boolean で、 HTML の disabled 属性を反映し、コントロールが無効か否か、つまりクリックを受け付けるかどうかを示します。
HTMLSelectElement.form読取専用
HTMLFormElement で、この要素が関連付けられているフォームを反映します。この要素が <form> 要素に関連付けられていなければ、 null を返します。
HTMLSelectElement.labels読取専用
NodeList で、この要素に関連付けられた <label> 要素を表します。
HTMLSelectElement.length
unsigned long で、 <option> 要素がこの select 要素に含まれる数です。
HTMLSelectElement.multiple
Boolean で、 HTML の multiple 要素を反映し、複数の項目を選択することができるかどうかを示します。
HTMLSelectElement.name
DOMString で、 HTML の name 属性を反映し、サーバーおよび DOM 検索機能で使用されるこのコントロールの名前が入ります。
HTMLSelectElement.options読取専用
HTMLOptionsCollection で、この要素に含まれる一連の <option> 要素を表します。
HTMLSelectElement.required
Boolean で、 HTML の required 属性を反映し、ユーザーがフォームを送信する前に値を選択する必要があることを示します。
HTMLSelectElement.selectedIndex
long で、最初に選択された <option> 要素の序数を反映します。 -1 の値は要素が選択されていないことを示します。
HTMLSelectElement.selectedOptions読取専用
HTMLCollection で、選択されているすべての <option> 要素を反映します。
HTMLSelectElement.size
long で、 HTML の size 属性を反映し、コントロール内で見える項目の数が入ります。既定値は、 multipletrue でなければ1で、そうでなければ4です。
HTMLSelectElement.type読取専用
DOMString で、フォームコントロールの型を表します。 multipletrue である場合は select-multiple を返し、そうでなければ select-one を返します。
HTMLSelectElement.validationMessage読取専用
DOMString で、 (もしあれば) 制約検証でコントロールが合格しなかった場合のローカライズされたメッセージを表現します。この属性はコントロールが制約検証の対象にならない場合 (willValidatefalse の場合) や、制約を満たしている場合は空文字列になります。
HTMLSelectElement.validity読取専用
ValidityState で、このボタンがある妥当性の状態を表します。
HTMLSelectElement.value
DOMString で、このフォームコントロールの値を反映します。選択されている option 要素があれば最初のものの value プロパティを返し、そうでなければ空文字列を返します。
HTMLSelectElement.willValidate読取専用
Boolean で、ボタンが制約検証の候補になるかどうかを示します。制約検証が阻止される場合は false となります。

メソッド

このインターフェイスは HTMLElement と、 Element および Node からメソッドを継承しています。

HTMLSelectElement.add()
要素をこの select 要素にある option 要素の集合に加えます。
HTMLSelectElement.blur()
この要素から入力フォーカスを外します。このメソッドは HTMLElement で実装されました
HTMLSelectElement.checkValidity()
要素に何らかの制約があるか、それを満たしているかをチェックします。要素が制約に違反していた場合、ブラウザーはキャンセル可能な invalid イベントを要素に送ります (そして false を返します)。
HTMLSelectElement.focus()
Gives input focus to this element. このメソッドは HTMLElement で実装されました
HTMLSelectElement.item()
この <select> 要素の選択肢の集合から項目を取得します。配列風に角括弧または括弧で序数を指定することで、明示的にこのメソッドを呼び出さずに項目にアクセスすることもできます。
HTMLSelectElement.namedItem()
選択肢の集合から指定した名前で項目を取得します。名前の文字列は option ノードの id または name 属性と一致させることができます。配列風に角括弧または括弧で名前を指定することで、明示的にこのメソッドを呼び出さずに項目にアクセスすることもできます。
HTMLSelectElement.remove()
この select 要素の選択肢の集合から、指定された序数の要素を削除します。
HTMLSelectElement.reportValidity()
このメソッドは、この要素の制約の問題があれば、ユーザーに報告します。問題があれば、キャンセル可能な invalid イベントを要素で発生させ、 false を返します。問題がなければ、 true を返します。
HTMLSelectElement.setCustomValidity()
選択要素の独自の検証メッセージを指定されたメッセージに設定します。要素に独自の検証エラーがないことを示すには、空文字列を使用してください。

イベント

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

input イベント
<input>, <select>, <textarea> の各要素の value が変化したときに発生します。

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

/*以下の HTML があることを想定する
<select id='s'>
    <option>First</option>
    <option selected>Second</option>
    <option>Third</option>
</select>
*/

var select = document.getElementById('s');

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

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

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

仕様書

仕様書 状態 備考
HTML Living Standard
HTMLSelectElement の定義
現行の標準 HTML5 の最新のスナップショットから、 autocomplete プロパティと reportValidity() メソッドを追加。
HTML5
HTMLSelectElement の定義
勧告 HTML Living Standard のスナップショット。
autofocus, form, required, labels, selectedOptions, willValidate, validity, validationMessage の各プロパティを追加。
tabindex プロパティと blur() および focus() メソッドを HTMLElement へ移動。
item(), namedItem(), checkValidity() setCustomValidity() の各メソッドを追加。
Document Object Model (DOM) Level 2 HTML Specification
HTMLSelectElement の定義
廃止された optionsHTMLOptionsCollection を返すようになった。
lengthunsigned long を返すようになった。
Document Object Model (DOM) Level 1 Specification
HTMLSelectElement の定義
廃止された 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
HTMLSelectElementChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 2
補足
完全対応 2
補足
補足 You should watch for change events on <select> instead of watching <option> elements for events. See bug 1090602 and Multiprocess Firefox Web content compatibility for details.
IE 完全対応 1Opera 完全対応 2Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
addChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
autocompleteChrome 完全対応 66Edge 完全対応 ≤79Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 66Chrome Android 完全対応 66Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 9.0
autofocusChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
blurChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
checkValidityChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 4IE 完全対応 10Opera 完全対応 9Safari 完全対応 5WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 4.2Samsung Internet Android 完全対応 1.0
disabledChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
focusChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
formChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
itemChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
labelsChrome 完全対応 14Edge 完全対応 18Firefox 完全対応 56IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 56Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
lengthChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
multipleChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
nameChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
namedItemChrome 完全対応 ありEdge 完全対応 12
補足
完全対応 12
補足
補足 namedItem does not appear to take the name attribute into account (only the id attribute) on Internet Explorer and Edge. There is a bug report to Microsoft about this.
Firefox 完全対応 4IE 完全対応 あり
補足
完全対応 あり
補足
補足 namedItem does not appear to take the name attribute into account (only the id attribute) on Internet Explorer and Edge. There is a bug report to Microsoft about this.
Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
optionsChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
removeChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
reportValidityChrome 完全対応 40Edge 完全対応 17Firefox 完全対応 49IE 未対応 なしOpera 完全対応 27Safari 完全対応 10WebView Android 完全対応 40Chrome Android 完全対応 40Firefox Android 完全対応 64Opera Android 完全対応 27Safari iOS 完全対応 10Samsung Internet Android 完全対応 4.0
requiredChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
selectedIndexChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
selectedOptionsChrome 完全対応 19Edge 完全対応 12Firefox 完全対応 26IE 未対応 なしOpera 完全対応 9Safari 完全対応 6WebView Android 完全対応 ≤37Chrome Android 完全対応 25Firefox Android 完全対応 26Opera Android 完全対応 10.1Safari iOS 完全対応 6Samsung Internet Android 完全対応 1.5
setCustomValidityChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
sizeChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
typeChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 2IE 完全対応 1Opera 完全対応 2Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
validationMessageChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
validityChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
valueChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
willValidateChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 4IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

  • このインターフェイスを実装している HTML 要素: <select>