HTMLSelectElement

HTMLSelectElement interface represents a <select> HTML Element. These elements also share all of the properties and methods of other HTML elements via the HTMLElement 接口。

特性

This interface inherits the properties of HTMLElement , and of Element and Node .

HTMLSelectElement.autofocus
A Boolean reflecting the autofocus HTML attribute, which indicates whether the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified.
HTMLSelectElement.disabled
A Boolean reflecting the disabled HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.
HTMLSelectElement.form 只读
An HTMLFormElement referencing the form that this element is associated with. If the element is not associated with of a <form> element, then it returns null .
HTMLSelectElement.labels 只读
A NodeList of <label> elements associated with the element.
HTMLSelectElement.length
An unsigned long The number of <option> elements in this select 元素。
HTMLSelectElement.multiple
A Boolean reflecting the multiple HTML attribute, which indicates whether multiple items can be selected.
HTMLSelectElement.name
A DOMString reflecting the name HTML attribute, containing the name of this control used by servers and DOM search functions.
HTMLSelectElement.options 只读
An HTMLOptionsCollection representing the set of <option> ( HTMLOptionElement ) elements contained by this element.
HTMLSelectElement.required
A Boolean reflecting the required HTML attribute, which indicates whether the user is required to select a value before submitting the form.
HTMLSelectElement.selectedIndex
A long reflecting the index of the first selected <option> element. The value -1 indicates no element is selected.
HTMLSelectElement.selectedOptions 只读
An HTMLCollection representing the set of <option> elements that are selected.
HTMLSelectElement.size
A long reflecting the size HTML attribute, which contains the number of visible items in the control. The default is 1, unless multiple is true , in which case it is 4.
HTMLSelectElement.type 只读
A DOMString represeting the form control's type. When multiple is true , it returns "select-multiple" ; otherwise, it returns "select-one" .
HTMLSelectElement.validationMessage 只读
A DOMString representing a localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation ( willValidate is false), or it satisfies its constraints.
HTMLSelectElement.validity 只读
A ValidityState reflecting the validity state that this control is in.
HTMLSelectElement.value
A DOMString reflecting the value of the form control. Returns the value property of the first selected option element if there is one, otherwise the empty string.
HTMLSelectElement.willValidate 只读
A Boolean that indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.

方法

This interface inherits the methods of HTMLElement , and of Element and Node .

HTMLSelectElement.add()
Adds an element to the collection of option elements for this select 元素。
HTMLSelectElement.blur()
Removes input focus from this element. This method is now implemented on HTMLElement .
HTMLSelectElement.checkValidity()
Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable invalid event at the element (and returns false ).
HTMLSelectElement.focus()
Gives input focus to this element. This method is now implemented on HTMLElement .
HTMLSelectElement.item()
Gets an item from the options collection for this <select> element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.
HTMLSelectElement.namedItem()
Gets the item in the options collection with the specified name. The name string can match either the id name attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.
HTMLSelectElement.remove()
Removes the element at the specified index from the options collection for this select 元素。
HTMLSelectElement.reportValidity()
This method reports the problems with the constraints on the element, if any, to the user. If there are problems, it fires a cancelable invalid event at the element, and returns false ; if there are no problems, it returns true .
HTMLSelectElement.setCustomValidity()
Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does not have a custom validity error.

Events

监听这些事件使用 addEventListener() 或通过把事件监听器赋值给 on eventname property of this interface:

input event
Fires when the value of an <input> , <select> ,或 <textarea> element has been changed.

范例

Get information about the selected option

/* assuming we have the following HTML
<select id='s'>
    <option>First</option>
    <option selected>Second</option>
    <option>Third</option>
</select>
*/
var select = document.getElementById('s');
// return the index of the selected option
console.log(select.selectedIndex); // 1
// return the value of the selected option
console.log(select.options[select.selectedIndex].value) // Second
					

A better way to track changes to the user's selection is to watch for the change event to occur on the <select> . This will tell you when the value changes, and you can then update anything you need to. See the example provided in the documentation for the change event for details.

规范

规范 状态 Comment
HTML Living Standard
The definition of 'HTMLSelectElement' in that specification.
实时标准 Since the latest snapshot, HTML5 , it adds the autocomplete property and the reportValidity() 方法。
HTML5
The definition of 'HTMLSelectElement' in that specification.
Recommendation Is a snapshot of HTML Living Standard .
It adds the autofocus , form , required , labels , selectedOptions , willValidate , validity and validationMessage 特性。
tabindex property and the blur() and focus() methods have been moved to HTMLElement .
The methods item() , namedItem() , checkValidity() and setCustomValidity() .
Document Object Model (DOM) Level 2 HTML Specification
The definition of 'HTMLSelectElement' in that specification.
Obsolete options now returns an HTMLOptionsCollection .
length now returns an unsigned long .
Document Object Model (DOM) Level 1 Specification
The definition of 'HTMLSelectElement' in that specification.
Obsolete 初始定义

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
HTMLSelectElement Chrome 1 Edge 12 Firefox 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 了解细节。
IE 1 Opera 2 Safari 1 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 10.1 Safari iOS 1 Samsung Internet Android 1.0
add Chrome Yes Edge 12 Firefox Yes IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
autocomplete Chrome 66 Edge ≤79 Firefox Yes IE ? Opera Yes Safari Yes WebView Android 66 Chrome Android 66 Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android 9.0
autofocus Chrome Yes Edge 12 Firefox Yes IE 10 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android No Safari iOS No Samsung Internet Android Yes
blur Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
checkValidity Chrome 4 Edge 12 Firefox 4 IE 10 Opera 9 Safari 5 WebView Android ≤37 Chrome Android 18 Firefox Android 4 Opera Android 10.1 Safari iOS 4.2 Samsung Internet Android 1.0
disabled Chrome Yes Edge 12 Firefox Yes IE 9 Opera 9 Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
focus Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
form Chrome Yes Edge 12 Firefox Yes IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
item Chrome Yes Edge 12 Firefox 4 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
labels Chrome 14 Edge 18 Firefox 56 IE No Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 56 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
length Chrome Yes Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
multiple Chrome Yes Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
name Chrome Yes Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
namedItem Chrome Yes 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 4 IE Yes
Yes
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 Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
options Chrome Yes Edge 12 Firefox Yes IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
remove Chrome Yes Edge 12 Firefox Yes IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
reportValidity Chrome 40 Edge 17 Firefox 49 IE No Opera 27 Safari 10 WebView Android 40 Chrome Android 40 Firefox Android 64 Opera Android 27 Safari iOS 10 Samsung Internet Android 4.0
required Chrome Yes Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
selectedIndex Chrome Yes Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
selectedOptions Chrome 19 Edge 12 Firefox 26 IE No Opera 9 Safari 6 WebView Android ≤37 Chrome Android 25 Firefox Android 26 Opera Android 10.1 Safari iOS 6 Samsung Internet Android 1.5
setCustomValidity Chrome Yes Edge 12 Firefox 4 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
size Chrome Yes Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
type Chrome 1 Edge 12 Firefox 2 IE 1 Opera 2 Safari 1 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 10.1 Safari iOS 1 Samsung Internet Android 1.0
validationMessage Chrome Yes Edge 12 Firefox 4 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
validity Chrome Yes Edge 12 Firefox 4 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
value Chrome Yes Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
willValidate Chrome Yes Edge 12 Firefox 4 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
见实现注意事项。

另请参阅

  • <select> HTML element, which implements this interface.
  1. HTMLSelectElement
  2. 特性
    1. autofocus
    2. disabled
    3. form
    4. labels
    5. options
    6. selectedIndex
    7. selectedOptions
    8. type
  3. 方法
    1. add()
    2. checkValidity()
    3. item()
    4. namedItem()
    5. remove()
    6. setCustomValidity()
  4. 继承:
    1. HTMLElement
    2. Element
    3. Node
    4. EventTarget
  5. Related pages for HTML DOM
    1. BeforeUnloadEvent
    2. DOMStringMap
    3. ErrorEvent
    4. GlobalEventHandlers
    5. HTMLAnchorElement
    6. HTMLAreaElement
    7. HTMLAudioElement
    8. HTMLBRElement
    9. HTMLBaseElement
    10. HTMLBaseFontElement
    11. HTMLBodyElement
    12. HTMLButtonElement
    13. HTMLCanvasElement
    14. HTMLContentElement
    15. HTMLDListElement
    16. HTMLDataElement
    17. HTMLDataListElement
    18. HTMLDialogElement
    19. HTMLDivElement
    20. HTMLDocument
    21. HTMLElement
    22. HTMLEmbedElement
    23. HTMLFieldSetElement
    24. HTMLFormControlsCollection
    25. HTMLFormElement
    26. HTMLFrameSetElement
    27. HTMLHRElement
    28. HTMLHeadElement
    29. HTMLHeadingElement
    30. HTMLHtmlElement
    31. HTMLIFrameElement
    32. HTMLImageElement
    33. HTMLInputElement
    34. HTMLIsIndexElement
    35. HTMLKeygenElement
    36. HTMLLIElement
    37. HTMLLabelElement
    38. HTMLLegendElement
    39. HTMLLinkElement
    40. HTMLMapElement
    41. HTMLMediaElement
    42. HTMLMetaElement
    43. HTMLMeterElement
    44. HTMLModElement
    45. HTMLOListElement
    46. HTMLObjectElement
    47. HTMLOptGroupElement
    48. HTMLOptionElement
    49. HTMLOptionsCollection
    50. HTMLOutputElement
    51. HTMLParagraphElement
    52. HTMLParamElement
    53. HTMLPictureElement
    54. HTMLPreElement
    55. HTMLProgressElement
    56. HTMLQuoteElement
    57. HTMLScriptElement
    58. HTMLShadowElement
    59. HTMLSourceElement
    60. HTMLSpanElement
    61. HTMLStyleElement
    62. HTMLTableCaptionElement
    63. HTMLTableCellElement
    64. HTMLTableColElement
    65. HTMLTableDataCellElement
    66. HTMLTableElement
    67. HTMLTableHeaderCellElement
    68. HTMLTableRowElement
    69. HTMLTableSectionElement
    70. HTMLTemplateElement
    71. HTMLTextAreaElement
    72. HTMLTimeElement
    73. HTMLTitleElement
    74. HTMLTrackElement
    75. HTMLUListElement
    76. HTMLUnknownElement
    77. HTMLVideoElement
    78. HashChangeEvent
    79. History
    80. ImageData
    81. Location
    82. MessageChannel
    83. MessageEvent
    84. MessagePort
    85. Navigator
    86. NavigatorGeolocation
    87. NavigatorID
    88. NavigatorLanguage
    89. NavigatorOnLine
    90. NavigatorPlugins
    91. PageTransitionEvent
    92. Plugin
    93. PluginArray
    94. PopStateEvent
    95. PortCollection
    96. PromiseRejectionEvent
    97. RadioNodeList
    98. Transferable
    99. ValidityState
    100. Window
    101. WindowBase64
    102. WindowEventHandlers
    103. WindowTimers