<select> 与 <option> 标签详解

在 HTML 表单中，<select> 和 <option> 是创建下拉菜单的核心元素。本文将通过示例、代码和说明，帮助你全面掌握它们的用法。

1. 基础语法

<select> 定义一个下拉列表，而每个 <option> 表示一个可选项。

<label for="fruit">请选择一种水果：</label>
<select id="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

2. 常用属性

• value：选项提交给服务器时的值（若未设置，则使用显示文本）。
• selected：默认选中的选项。
• disabled：禁用某个选项或整个下拉框。
• multiple：允许用户选择多个选项（需按住 Ctrl 或 Cmd）。

示例：默认选中 + 禁用选项

<select>
  <option value="red">红色</option>
  <option value="green" selected>绿色（默认）</option>
  <option value="blue" disabled>蓝色（不可选）</option>
</select>

3. 多选下拉框（multiple）

<select multiple size="4">
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
</select>

4. JavaScript 交互示例

你可以通过 JavaScript 获取用户选择的值，并做出响应。

5. 最佳实践建议

• 始终为 <select> 添加 <label> 提升可访问性。
• 避免选项过多（超过 10 个建议改用搜索型下拉）。
• 合理使用 optgroup 对选项分组。