HTML 的 ＜option＞ 元素

1. 什么是 <option> 元素

<option> 元素用于定义下拉列表（<select>）、多选列表或带输入框的下拉框（<datalist>）中的选项。它是表单交互中不可或缺的组成部分，用户通过选择不同的选项来提交对应的值。

一个最简单的下拉列表示例如下：

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

当用户选择「上海」并提交表单时，服务器收到的 city 值就是 shanghai，而不是显示文本「上海」。

2. <option> 的核心属性

2.1 value 属性

value 属性定义了选项被选中时提交给服务器的值。如果省略 value，则提交的值为选项的文本内容。

<!-- 省略 value 时，提交的值为文本本身 -->
<option>北京</option>

<!-- 显式指定 value -->
<option value="BJ">北京</option>

2.2 selected 属性

selected 属性用于设置默认选中的选项。在单选下拉框中，默认选中第一个选项；如需指定其他默认项，可添加 selected。

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

2.3 disabled 属性

disabled 属性可以禁用某个选项，使其不可被选中，通常用于展示「暂时不可用」的选项。

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

2.4 label 属性

label 属性用于为选项设置更短的显示标签。若设置了 label，浏览器会优先显示 label 的值而非选项文本。

<select name="city">
  <option value="beijing" label="北京">北京市</option>
  <option value="shanghai" label="上海">上海市</option>
</select>

3. <option> 与 <optgroup> 分组

当选项较多时，可以使用 <optgroup> 元素对 <option> 进行分组，提升用户体验。

<select name="city">
  <optgroup label="华北地区">
    <option value="beijing">北京</option>
    <option value="tianjin">天津</option>
  </optgroup>
  <optgroup label="华东地区">
    <option value="shanghai">上海</option>
    <option value="nanjing">南京</option>
  </optgroup>
</select>

4. <option> 在 <datalist> 中的应用

<datalist> 为输入框提供预定义选项，用户既可以自由输入，也可以从列表中选择。

<input list="cities" name="city" placeholder="请输入或选择城市">
<datalist id="cities">
  <option value="北京"></option>
  <option value="上海"></option>
  <option value="广州"></option>
</datalist>

注意：在 <datalist> 中，<option> 的 value 会直接显示在输入框中，因此通常不需要再写文本内容。

5. 动态操作 <option>

在实际开发中，经常需要通过 JavaScript 动态增删选项。以下是一个常见示例：

<select id="citySelect">
  <option value="beijing">北京</option>
</select>

<script>
  // 新增选项
  const select = document.getElementById('citySelect');
  const option = new Option('上海', 'shanghai');
  select.add(option);

  // 删除选项
  select.remove(1);

  // 清空所有选项
  select.innerHTML = '';
</script>

6. 常见问题与注意事项

• <option> 元素必须位于 <select>、<optgroup> 或 <datalist> 内部，单独使用没有意义。
• 在 <select> 中，<option> 的文本内容默认作为展示文本；在 <datalist> 中，value 才是展示文本。
• 若希望支持多选，可在 <select> 上添加 multiple 属性，此时用户可按住 Ctrl（Windows）或 Command（Mac）进行多选。
• 通过 CSS 直接美化 <option> 的样式在部分浏览器中支持有限，如需高度定制，可考虑使用第三方下拉组件。

7. 总结

<option> 元素虽然简单，但它是表单交互的核心。掌握 value、selected、disabled 等属性，理解它与 <select>、<optgroup>、<datalist> 的配合方式，并学会用 JavaScript 动态操作选项，就能应对绝大多数下拉选择的开发场景。