HTML 下拉选择框 - <select>

什么是 <select> 标签？

<select> 是HTML表单中的下拉选择框控件，用于创建一个包含多个选项的下拉菜单，允许用户从中选择一个或多个选项。

基本语法

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

核心属性

name 属性

name 属性为下拉选择框指定名称，用于表单提交时标识字段。

示例：

html 
<select name="country">
  <!-- 选项 -->
</select>

multiple 属性

multiple 属性允许用户选择多个选项。

示例：

html 
<select name="hobbies" multiple>
  <option value="reading">阅读</option>
  <option value="music">音乐</option>
  <option value="sports">运动</option>
  <option value="travel">旅行</option>
</select>

size 属性

size 属性指定下拉选择框可见的选项数量。

示例：

html 
<select name="countries" size="3">
  <option value="china">中国</option>
  <option value="usa">美国</option>
  <option value="japan">日本</option>
  <option value="uk">英国</option>
</select>

disabled 属性

disabled 属性禁用下拉选择框，用户无法与之交互，且禁用的字段不会被提交。

示例：

html 
<select name="old-country" disabled>
  <option value="china">中国</option>
</select>

required 属性

required 属性指定下拉选择框为必填项，表单提交前会验证该字段是否有选择。

示例：

html 
<select name="gender" required>
  <option value="">请选择性别</option>
  <option value="male">男</option>
  <option value="female">女</option>
</select>

与 <option> 标签配合使用

<select> 标签需要与 <option> 标签配合使用，每个 <option> 标签代表一个可选择的选项。

option 标签的属性

  • value：选项的值，表单提交时发送的值
  • selected：指定默认选中的选项
  • disabled：禁用某个选项

示例：

html 
<select name="city">
  <option value="">请选择城市</option>
  <option value="beijing" selected>北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
  <option value="shenzhen" disabled>深圳（暂不可选）</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>
  <optgroup label="华南地区">
    <option value="guangzhou">广州</option>
    <option value="shenzhen">深圳</option>
  </optgroup>
</select>

表单提交

单选情况

当 <select> 标签没有 multiple 属性时，表单提交时只会发送选中选项的 value 值。

html 
<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai" selected>上海</option>
</select>
<!-- 提交时：city=shanghai -->

多选情况

当 <select> 标签有 multiple 属性时，表单提交时会发送所有选中选项的 value 值，名称相同。

html 
<select name="hobbies" multiple>
  <option value="reading" selected>阅读</option>
  <option value="music" selected>音乐</option>
  <option value="sports">运动</option>
</select>
<!-- 提交时：hobbies=reading&hobbies=music -->

最佳实践

  1. 始终使用 label 标签：为下拉选择框提供描述，提高可访问性

  2. 添加默认选项：提供一个说明性的默认选项，如"请选择…"

  3. 使用 <optgroup> 分组：对于大量选项，使用分组提高可用性

  4. 考虑多选场景：根据需求决定是否允许多选

  5. 设置合适的大小：对于多选情况，使用 size 属性设置合适的可见行数

示例：

html 
<label for="country">选择国家：</label>
<select id="country" name="country" required>
  <option value="">请选择国家</option>
  <optgroup label="亚洲">
    <option value="china">中国</option>
    <option value="japan">日本</option>
    <option value="korea">韩国</option>
  </optgroup>
  <optgroup label="欧洲">
    <option value="uk">英国</option>
    <option value="france">法国</option>
    <option value="germany">德国</option>
  </optgroup>
</select>

CSS样式化

可以使用CSS对下拉选择框进行样式化，例如：

css 
select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
}

浏览器兼容性

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

总结

<select> 标签是HTML表单中用于创建下拉选择菜单的重要控件。通过与 <option> 和 <optgroup> 标签配合使用，可以创建结构化、易用的选择界面，适用于需要从多个选项中选择一个或多个的场景。

最后更新：2026-02-07