HTML 下拉选择框

Begindev 编辑部 March 25, 2026

在 HTML 表单中，<select> 和 <option> 标签用于创建下拉菜单（Dropdown Lists）。

下拉菜单允许用户从预先设定好的一组选项中进行选择。这提供了一种结构化且用户友好的数据收集方式。无论是选择国家、挑选商品分类，还是指定日期，下拉框都必不可少。

相比于让用户自由输入的文本框，下拉菜单把选项有条理地展示出来，大大降低了用户填错数据的概率，从而提升了整体的用户体验。

1. 认识 `<select>` 标签

<select> 标签是一个容器元素，用于在 HTML 表单中定义一个下拉列表（也称为选择框）。它就像一个包装盒，里面装着一个或多个 <option> 标签，而这些 <option> 标签代表着提供给用户的具体选项。

1.1 基础语法

<select> 标签的基础结构如下：

<select>
  <option value="value1">选项 1</option>
  <option value="value2">选项 2</option>
  <option value="value3">选项 3</option>
</select>

<select>：这是创建下拉列表的主标签。
<option>：每一个 <option> 标签代表下拉列表中的一个单项选择。value 属性指定了表单提交时真正发送给服务器的数据，而夹在 <option> 和 </option> 之间的文本，则是用户在网页上肉眼看到的文字。

1.2 `<select>` 标签的常用属性

<select> 标签支持多种属性来控制它的行为和外观。以下是最常用的几个：

name：这个属性对于表单数据处理至关重要。它指定了下拉框的名称。当表单提交时，服务器就是通过这个名字来找到用户选中的值的。如果没有 name 属性，选中的数据根本不会被发送到服务器。
id：提供一个唯一的标识符。这让你能够用 CSS 给它写样式，或者用 JavaScript 来控制它的动态行为。
multiple：如果加上这个属性，用户就可以在下拉列表中选择多个选项。提交时，选中的值通常会作为一个数组发送。
size：指定下拉列表中默认可见的选项数量。如果总选项数超过了 size 的值，浏览器会自动显示一个滚动条。
required：这是一个布尔属性（写上即生效），规定用户在提交表单前必须选择一个有效的选项。
disabled：这是一个布尔属性，用于禁用整个下拉框，用户将无法点击或与它进行任何交互。

示例：一个简单的水果选择框

<label for="fruit">选择你最喜欢的水果：</label>
<select name="favorite_fruit" id="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
  <option value="grape">葡萄</option>
</select>

在这个例子中：

name 属性被设为 "favorite_fruit"。当提交表单时，服务器会收到一个名为 "favorite_fruit" 的参数，它的值可能是 "apple"、"banana" 等（取决于用户选了啥）。
id 设置为 "fruit"，通常配合前面的 <label for="fruit"> 使用，点击文字就能激活下拉框，这极大地提升了无障碍访问体验。

2. 深入理解 `<option>` 标签

<option> 标签代表 <select> 元素内的一个单独选项。记住，每一个 <option> 标签都强烈建议带上 value 属性，以明确告诉服务器这个选项代表的具体数据。

2.1 基础语法

<option value="数据值">显示给用户的文本</option>

value：指定表单提交时发送给服务器的真实值。
显示给用户的文本：用户点开下拉菜单时看到的文字。

2.2 `<option>` 标签的常用属性

value：如上所述，指定提交给服务器的值。
selected：这是一个布尔属性，用于指定页面加载时默认被选中的项。在一个普通的 <select> 元素中，只能有一个 <option> 带有 selected 属性（除非 <select> 开启了 multiple 多选）。
disabled：这是一个布尔属性，用于禁用该特定选项。用户可以在列表中看到它（通常是灰色的），但无法点击选中它。

示例：预设默认选项

如果我们希望页面一打开，默认选中的就是“香蕉”：

<label for="fruit">选择你最喜欢的水果：</label>
<select name="favorite_fruit" id="fruit">
  <option value="apple">苹果</option>
  <option value="banana" selected>香蕉</option> <option value="orange">橙子</option>
  <option value="grape">葡萄</option>
</select>

示例：禁用某个选项

如果“橙子”今天卖光了，你可以禁用它：

<label for="fruit">选择你最喜欢的水果：</label>
<select name="favorite_fruit" id="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange" disabled>橙子 (已售罄)</option> <option value="grape">葡萄</option>
</select>

3. 使用 `<optgroup>` 对选项进行分组

当你的下拉菜单非常长时，使用 <optgroup> 标签将相关的选项分组，可以极大提升菜单的条理性和可读性。

3.1 基础语法

<select>
  <optgroup label="第一组名称">
    <option value="value1">选项 1</option>
    <option value="value2">选项 2</option>
  </optgroup>
  <optgroup label="第二组名称">
    <option value="value3">选项 3</option>
    <option value="value4">选项 4</option>
  </optgroup>
</select>

<optgroup>：定义一个选项组。
label：指定这个选项组的标题名称。这个标题会显示在下拉列表中，且通常是加粗不可点击的，作为下方选项的分类提示。

示例：将水果按类型分组

<label for="fruit">选择你最喜欢的水果：</label>
<select name="favorite_fruit" id="fruit">
  <optgroup label="柑橘类">
    <option value="orange">橙子</option>
    <option value="lemon">柠檬</option>
    <option value="grapefruit">西柚</option>
  </optgroup>
  <optgroup label="其他水果">
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="grape">葡萄</option>
  </optgroup>
</select>

4. 开启多选模式：Multiple Select Box

只要给 <select> 标签加上 multiple 属性，用户就可以选择多个选项。在电脑上，用户通常需要按住 Ctrl 键（Windows）或 Cmd 键（Mac）的同时点击选项来实现多选。

示例：允许选择多种水果

<label for="fruits">选择你喜欢的水果（可多选）：</label><br>
<select name="favorite_fruits[]" id="fruits" multiple size="4">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
  <option value="grape">葡萄</option>
  <option value="kiwi">猕猴桃</option>
</select>

在这个例子中：

加上了 multiple 属性，开启多选。
size="4"让选择框默认展开显示 4 个选项的高度，多余的选项可以通过滚动条查看。
(高级提示) 注意 name="favorite_fruits[]" 中的方括号 []。在很多后端语言（如 PHP）中，加上方括号能确保服务器正确地接收一个包含多个选项值的数组。

1. 认识 <select> 标签

1.1 基础语法

1.2 <select> 标签的常用属性

2. 深入理解 <option> 标签