就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. Web API
  3. HTMLSelectElement

在此页

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

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="../API/EventTarget.html" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25  351,20  351,30  341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25  501,20  501,30  491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="../API/HTMLSelectElement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="406" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLSelectElement</text></a></svg></div>
					
  a:hover text { fill: #0095DD; pointer-events: all;}

特性

This interface inherits the properties of HTMLElement , and of 元素 and 节点 .

HTMLSelectElement.autofocus
布尔 反射 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
布尔 反射 被禁用 HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.
HTMLSelectElement.form 只读
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 只读
NodeList of <label> elements associated with the element.
HTMLSelectElement.length
An unsigned long The number of <option> elements in this select 元素。
HTMLSelectElement.multiple
布尔 反射 multiple HTML attribute, which indicates whether multiple items can be selected.
HTMLSelectElement.name
DOMString 反射 名称 HTML attribute, containing the name of this control used by servers and DOM search functions.
HTMLSelectElement.options 只读
HTMLOptionsCollection representing the set of <option> ( HTMLOptionElement ) elements contained by this element.
HTMLSelectElement.required
布尔 反射 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 只读
HTMLCollection representing the set of <option> elements that are selected.
HTMLSelectElement.size
A long 反射 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 只读
DOMString represeting the form control's type. When multiple is true ，它返回 "select-multiple" ；否则，它返回 "select-one" .
HTMLSelectElement.validationMessage 只读
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 只读
ValidityState reflecting the validity state that this control is in.
HTMLSelectElement.value
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 只读
布尔 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 元素 and 节点 .

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 无效 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 或 名称 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 无效 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.

事件

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

input event
Fires when the value of an <input> , <select> ，或 <textarea> 元素已改变。

范例

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.

规范

规范 状态 注释
HTML 实时标准
The definition of 'HTMLSelectElement' in that specification. 		实时标准 Since the latest snapshot, HTML5 , it adds the autocomplete 特性和 reportValidity() 方法。
HTML5
The definition of 'HTMLSelectElement' in that specification. 		推荐 Is a snapshot of HTML 实时标准 .
It adds the autofocus , form , required , labels , selectedOptions , willValidate , validity and validationMessage 特性。
tabindex 特性和 blur() and focus() methods have been moved to HTMLElement .
方法 item() , namedItem() , checkValidity() and setCustomValidity() .
DOM (文档对象模型) 2 级 HTML 规范
The definition of 'HTMLSelectElement' in that specification. 		过时 选项 now returns an HTMLOptionsCollection .
length now returns an unsigned long .
DOM (文档对象模型) 1 级规范
The definition of 'HTMLSelectElement' in that specification. 		过时 初始定义

浏览器兼容性

更新 GitHub 上的兼容性数据
桌面 移动
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
被禁用 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
名称 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 名称 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 名称 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
选项 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. 被禁用
    3. form
    4. labels
    5. 选项
    6. selectedIndex
    7. selectedOptions
    8. type
  3. 方法
    1. add()
    2. checkValidity()
    3. item()
    4. namedItem()
    5. remove()
    6. setCustomValidity()
  4. 继承：
    1. HTMLElement
    2. 元素
    3. 节点
    4. EventTarget
  5. 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. 历史
    80. ImageData
    81. 定位
    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