HTML <option> tag

定义和用法

<option> 标签定义选择列表中的选项。

<option> 元素位于 <select>、<optgroup> 或 <datalist> 元素内。

注意：<option> 标签可以在没有任何属性的情况下使用，但您通常需要 value 属性，它指示在表单提交时发送到服务器的内容。

提示：如果您有很长的选项列表，您可以在 <optgroup> 标签内对相关选项进行分组。

另请参阅：

HTML DOM 参考手册：Option 对象

实例

例子 1

包含四个选项的下拉列表：

<label for="cars">请选择一个汽车品牌：</label>
<select id="cars">
  <option value="audi">奥迪</option>
  <option value="byd">比亚迪</option>
  <option value="geely">吉利</option>
  <option value="volvo">沃尔沃</option>
</select>

Try it yourself

例子 2

在 <datalist> 元素中使用 <option>：

<label for="browser">请从列表中选择您的浏览器：</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Try it yourself

例子 3

在 <optgroup> 元素中使用 <option>：

<label for="cars">请选择一个汽车品牌：</label>
<select id="cars">
  <optgroup label="中国车">
    <option value="byd">比亚迪</option>
    <option value="geely">吉利</option>
  </optgroup>
  <optgroup label="德国车">
    <option value="mercedes">奔驰</option>
    <option value="audi">奥迪</option>
  </optgroup>
</select>

Try it yourself

Attribute

Attribute Value Description
disabled disabled Specifies that the option should be disabled.
label Text Specifies a shorter label for the option.
selected selected Specifies that an option should be pre-selected when the page is loaded.
value Text Specifies the value to be sent to the server.

Global attributes

<option> The tag also supports Global attributes in HTML.

Event attributes

<option> The tag also supports Event attributes in HTML.

Default CSS settings

None.

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support