<option>

尝试一下

<label for="pet-select">Choose a pet:</label>

<select id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</select>

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: 0.9rem;
  padding: 2px 5px;
}

• 内容类别 无
• 允许的内容带有最终转义字符（例如 é）的文本
• 标记省略 开始标记是必需的。如果此元素紧接着是另一个 <option> 元素或<optgroup>, 或者父元素没有其他内容，则结束标记是可选的。
• Implicit ARIA role option
• Permitted ARIA roles No 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> 示例。

规范

浏览器兼容性

参见

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