HTML <option> 标签属性

简介

HTML 中的 <option> 标签用于定义 select 元素中的一个选项。<option> 元素必须作为 select 元素的子元素，或位于 optgroup 元素中。

属性

value 属性

value 属性定义 <option> 元素的值。该值可通过 JavaScript 使用。

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

selected 属性

selected 属性定义一个选项是否被选中。在 select 元素中只有一个选项可以被选中。如果没有指定 selected 属性，则第一个选项被作为默认值。

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes" selected>Mercedes</option>
  <option value="audi">Audi</option>
</select>

disabled 属性

disabled 属性定义一个选项是否被禁用。被禁用的选项不能被选中，并且在列表中的样式与未被禁用的选项不同。

<select>
  <option value="volvo">Volvo</option>
  <option value="saab" disabled>Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi" disabled>Audi</option>
</select>

案例

<select>
  <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>

结论

<option> 标签非常常用，可以通过 value 属性定义选项的值，通过 selected 属性定义默认选项，通过 disabled 属性定义被禁用的选项。通过组合使用 <optgroup> 可以方便地对选项进行分组。