码农教程 - 一技在手,衣食无忧! tools

HTML <option> 标签

❮上一节 完整的 HTML参考 下一节❯

示例

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

<label for="cars">Choose a car:</label>

<select id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

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

<option>元素进入 a 内部<选择>,<选择组>， 或者<数据列表>元素。

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

提示：如果选项列表很长，您可以将相关选项分组到<选择组>标签。

浏览器支持

Element
<option> Yes Yes Yes Yes Yes

属性

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

全局属性

这个<option>标签还支持HTML 中的全局属性。

事件属性

这个<option>标签还支持HTML 中的事件属性。

更多示例

示例

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

<label for="browser">Choose your browser from the list:</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>
亲自试一试 »

示例

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

<label for="cars">Choose a car:</label>
<select id="cars">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>
亲自试一试 »

相关页面

HTML DOM 参考：选项对象

默认 CSS 设置

没有任何。


❮上一节 完整的 HTML参考 下一节❯