HTML <option> 元素

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

创建带有 4 个选项的选择列表：

<select>
  <option value="volvo">沃尔沃</option>
  <option value="saab">萨博</option>
  <option value="mercedes">奔驰</option>
  <option value="audi">奥迪</option>
</select>

尝试一下 »

特性

内容类别	无。
允许的内容	文字，可能带有转义字符（例如 é）。
标签省略	必须有开始标签。如果该元素紧接着另一个 <option> 元素或 <optgroup>，或者父元素没有更多内容，则结束标签是可选的。
允许的父元素	<select>，<optgroup> 或 <datalist> 元素。
允许的 ARIA 角色	无
DOM 接口	HTMLOptionElement

属性

该元素包含了全局属性。

disabled

如果设置了该布尔属性，则该选项不可选中。通常，浏览器会将这种控件变成灰色，并且不会收到任何浏览事件，例如鼠标点击或与焦点相关的事件。如果未设置该属性，而且它的上级是禁用的 <optgroup> 元素，则该元素仍然是被禁用。

label

该属性是用于表示选项含义的文本。如果未定义 label 属性，则其值是元素文本内容的值。

selected

如果存在该布尔属性，表示该选项默认被选中。如果 <option> 元素是 <select> 元素的后代，并且没有设置 multiple 属性，则这个 <select> 元素只能有一个 <option> 有 selected 属性。

value

如果选择该选项，则该属性的内容表示要与表单一起提交的值。如果省略该属性，则该值取自选项元素的文本内容。

事件属性

<option> 元素支持所有 HTML事件属性。

使用说明

<option> 元素可以在不带有任何属性的情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。

请与 <select> 元素配合使用此元素，否则这个元素是没有意义的。

如果列表选项很多，可以使用 <oprgroup> 元素对相关选项进行组合。

规范

规范	状态	备注
HTML Living Standard <option> 的定义	现行的标准	-
HTML5 <option> 的定义	推荐	-
HTML 4.01 Specification <option> 的定义	推荐	初始定义

桌面浏览器兼容性

移动浏览器兼容性

1. 如果元素的内容为空，则 Firefox 不会将 label 属性的值显示为选项文本。参见 bug 40545。

2. 曾经，Firefox 允许键盘和鼠标事件从 <option> 元素向父级 <select> 元素冒泡，尽管这种行为在许多浏览器中不一致。为了获得更好的 Web 兼容性（以及出于技术的原因），当 Firefox 处于多进程模式并且 <select> 元素显示为下拉列表时，如果 <select> 以内联方式呈现，并且它具有 multiple 属性，或者 size 属性呢的值大于 1，则存在该行为。观察元素事件时，您不应该观察 <option> 元素，而应该是 <select> 元素。有关详细信息，请参阅 bug 1090602。

3. 当 Mozilla 向 Firefox 引入了专用内容线程时（通过 Electrolysis 或称为 e10s 项目），暂时删除了对 <option> 元素的样式支持。从 Firefox 54 开始，您可以通过 CSS 属性的颜色和背景色再次为 <option> 元素设置样式。有关更多信息，请参阅 bug 910022。请注意，由于缺乏对比度，这在 Linux 中仍然被禁用（有关该方面的进展，请参阅 bug 1338283）。

相关链接

• 其他表单相关的元素：<form>，<legend>，<label>，<button>，<select>，<datalist>，<optgroup>，<fieldset>，<textarea>，<keygen>，<input>，<output>，<progress> 和 <meter>。