<option>

HTML元素 <option>  用于定义在 <select><optgroup><datalist> 元素中包含的项。<option> 可以在弹出窗口和 HTML 文档中的其他项目列表中表示菜单项。

  • 内容类别 无
  • 允许的内容带有最终转义字符(例如 &eacute;)的文本
  • 标记省略 开始标记是必需的。如果此元素紧接着是另一个 <option> 元素或<optgroup>, 或者父元素没有其他内容, 则结束标记是可选的。
  • Implicit ARIA roleoption
  • Permitted ARIA rolesNo role permitted
  • 允许的父元素 A <select>, an <optgroup> or a <datalist> element.
  • DOM 接口 HTMLOptionElement

属性

此元素包括全局属性

disabled
如果设置了这个布尔属性,则该选项不可选。浏览器通常会将这种控件显示为灰色,并且不再接受任何浏览器事件,例如鼠标点击或者焦点相关的事件。如果这个属性没有设置,而这个元素的其中一个父元素是被禁用的 <optgroup> 元素,则这个元素仍然是禁用的 。
label
这个属性是用于表示选项含义的文本。如果 label 属性没有定义,它的值就是元素文本内容。
selected
这个布尔属性存在时表明这个选项是否一开始就被选中。如果 <option> 元素是 <select> 元素的子元素,并且 <select> 元素的 multiple 属性没有设置,则 <select> 元素中只有一个 <option> 元素可以拥有 selected 属性。
value
这个属性的值表示该选项被选中时提交给表单的值。如果省略了这个属性,值就从选项元素的文本内容中获取。

示例

参见 <select> 示例。

规范

Specification Status Comment
HTML Living Standard
<option>
Living Standard
HTML5
<option>
Recommendation
HTML 4.01 Specification
<option>
Recommendation Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
optionChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
disabledChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
labelChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Before 77, Firefox didn't display the value of the label attribute as option text if element's content was empty. See bug 40545.
Notes Historically, Firefox has allowed keyboard and mouse events to bubble up from the <option> element to the parent <select> element, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), they will not bubble up when Firefox is in multi-process mode and the <select> element is displayed as a drop-down list. The behavior is unchanged if the <select> is presented inline and it has either the multiple attribute defined or a size attribute set to more than 1. Rather than watching <option> elements for events, you should watch for change events on <select>. See bug 1090602 for details.
Notes When Mozilla introduced dedicated content threads to Firefox (through the Electrolysis, or e10s, project), support for styling <option> elements was removed temporarily. Starting in Firefox 54, you can apply foreground and background colors to <option> elements again, using the color and background-color CSS properties. See bug 910022 for more information. Note that this is still disabled in Linux due to lack of contrast (see bug 1338283 for progress on this).
IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4
Notes
Full support 4
Notes
Notes Before 77, Firefox didn't display the value of the label attribute as option text if element's content was empty. See bug 40545.
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
selectedChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
valueChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

另见