HTML 下拉选项 - <option>

什么是 <option> 标签？

<option> 是HTML表单中的下拉选项标签，用于定义 <select>、<datalist> 或 <optgroup> 元素中的一个可选择项。它通常与 <select> 标签配合使用，创建下拉选择菜单。

基本语法

html 
<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

核心属性

value 属性

value 属性指定选项的值，当表单提交时，这个值会被发送到服务器。如果没有指定 value 属性，表单会发送选项的文本内容。

示例：

html 
<select name="gender">
  <option value="male">男</option>
  <option value="female">女</option>
  <!-- 没有value属性，提交时发送"其他" -->
  <option>其他</option>
</select>

selected 属性

selected 属性指定默认选中的选项。

示例：

html 
<select name="country">
  <option value="china" selected>中国</option>
  <option value="usa">美国</option>
  <option value="japan">日本</option>
</select>

disabled 属性

disabled 属性禁用某个选项，用户无法选择它。

示例：

html 
<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou" disabled>广州（暂不可选）</option>
</select>

label 属性

label 属性为选项提供一个更简短的描述，当在 <select> 中使用 size 属性或在 <datalist> 中使用时特别有用。

示例：

html 
<select name="countries" size="3">
  <option value="china" label="CHN">中华人民共和国</option>
  <option value="usa" label="USA">美利坚合众国</option>
  <option value="japan" label="JPN">日本国</option>
</select>

与不同元素配合使用

与 <select> 配合

最常见的用法是与 <select> 标签配合，创建下拉选择菜单：

示例：

html 
<select name="language">
  <option value="zh-CN">中文简体</option>
  <option value="zh-TW">中文繁体</option>
  <option value="en">英文</option>
  <option value="ja">日文</option>
</select>

与 <optgroup> 配合

与 <optgroup> 标签配合，创建分组的下拉菜单：

示例：

html 
<select name="city">
  <optgroup label="华北">
    <option value="beijing">北京</option>
    <option value="tianjin">天津</option>
  </optgroup>
  <optgroup label="华东">
    <option value="shanghai">上海</option>
    <option value="hangzhou">杭州</option>
  </optgroup>
</select>

与 <datalist> 配合

与 <datalist> 标签配合，为输入框提供建议选项：

示例：

html 
<input type="text" name="browser" list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

最佳实践

  1. 始终设置 value 属性：明确指定选项的值，避免提交意外的文本内容

  2. 使用有意义的值：选择简洁、有意义的 value 值，便于服务器处理

  3. 提供默认选项：使用 selected 属性设置合理的默认选项

  4. 禁用不可用选项：使用 disabled 属性禁用当前不可用的选项

  5. 分组相关选项：对于大量选项，使用 <optgroup> 进行分组

示例：

html 
<label for="payment-method">支付方式：</label>
<select id="payment-method" name="payment-method" required>
  <option value="">请选择支付方式</option>
  <optgroup label="在线支付">
    <option value="alipay" selected>支付宝</option>
    <option value="wechat">微信支付</option>
    <option value="credit-card">信用卡</option>
  </optgroup>
  <optgroup label="线下支付">
    <option value="cash">现金</option>
    <option value="bank-transfer">银行转账</option>
  </optgroup>
  <option value="other" disabled>其他方式（暂不支持）</option>
</select>

浏览器兼容性

所有现代浏览器都支持 <option> 标签及其常用属性。

总结

<option> 标签是创建下拉选择菜单的基本组件，通过与 <select>、<optgroup> 或 <datalist> 等标签配合使用，可以创建功能丰富的选择界面。正确使用 <option> 标签及其属性，可以提高表单的易用性和数据收集的准确性。

最后更新：2026-02-07