HTML | DOM 选项标签属性

选项标签 <option> 在 HTML 表单元素中常用于构建下拉列表或单选列表。通过选项标签的不同属性，我们可以对选项元素进行不同程度的定制化，使其更符合我们的需求。

基本属性

value

value 属性可为选项元素设定值，该值在向服务器提交表单时被发送给服务器。默认情况下，value 属性的值与选项元素的文本内容相同。

<select name="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

selected

selected 属性可以用于指示选项元素是否被预选中。如果设置了该属性，则在页面加载时该选项元素会被选中，如果设定的多个选项元素均带有该属性，则以最后一个的值为准。如果该属性不设定，则默认选中第一个选项元素。

<select name="color">
  <option value="r" selected>红</option>
  <option value="g">绿</option>
  <option value="b">蓝</option>
</select>

其他属性

label

label 属性是一个字符串值，用于为选项元素定义标签。当该属性被设置时，点击选项元素的标签区域时，与该属性值对应的选项元素将被置于选中状态。

<select>
  <optgroup label="肉类食品">
    <option value="beef">牛肉</option>
    <option value="pork">猪肉</option>
  </optgroup>
  <optgroup label="水产食品">
    <option value="fish">鱼</option>
    <option value="shrimp">虾</option>
  </optgroup>
</select>

disabled

disabled 属性为布尔值，用于指示选项元素是否禁用。如果设置了该属性，则用户无法选择该选项元素。

<select>
  <option value="apple">苹果</option>
  <option value="banana" disabled>香蕉（已下架）</option>
  <option value="orange">橙子</option>
</select>

hidden

hidden 属性为布尔值，用于指示选项元素是否隐藏。如果设置了该属性，则该选项元素不会被显示在列表中。注意，即使该属性被设置，该选项元素的 value 属性仍会被提交给服务器。

<select>
  <option value="apple">苹果</option>
  <option value="banana" hidden>香蕉</option>
  <option value="orange">橙子</option>
</select>

结束语

选项标签是 HTML 表单元素中必不可少的一环，而选项标签的属性也为我们在某些场合下提供了更好的表单交互体验。希望以上介绍能对大家有所帮助。