<select>: 下拉列表标签

最后更新：2026-10-13

<select>下拉列表标签

下拉选择框，让用户从一组预设选项中选择一个或多个值，常与 form 表单一起提交。

分类	表单
内容模型	流式内容
允许的父元素	接受流式内容的元素
闭合标签	需要 `</select>` 标签
状态	标准

📝 语法

<select name="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
</select>

⚙️ 属性

该元素支持全局属性及以下专有属性：

属性	值	描述
`name`		提交到服务器的字段名。
`multiple`		允许同时选择多个选项。
`required`		提交前必须选择一个选项。
`disabled`		禁用整个下拉框。
`size`		可见选项的行数（设为大于 1 时变为列表框）。
`autofocus`		页面加载时自动获得焦点。
`form`		关联的 form id（可放在表单外）。

查看所有全局属性 → 查看所有事件属性 →

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
<select>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： 需要多选时加 multiple；要可输入时改用 input + datalist 组合。

❓ 常见问题

Qselect 怎么设置默认选中项？

A在对应的 <option> 上加 selected 属性：<option selected>默认项</option>。不写时默认选中第一个 option。也可以用 JS 设置 select.value 改变选中态。

Qselect 可以多选吗？

A可以，加 multiple 属性：桌面端按 Ctrl/Cmd 多选，移动端体验较差。多选 select 的 name 要写成数组形式（如 name='tags[]'），后端才能收到多个值。选项多时建议改用复选框组。

Qselect 的选项太多怎么办？

A用 <optgroup> 分组加小标题；或改用 <input list> + <datalist> 提供可搜索的输入建议。原生 select 无法搜索，选项超过几十个时应考虑第三方组件或 datalist 方案。

更多案例即将上线，敬请期待。

📚 相关教程

HTML Forms HTML Input Types Reference

HTML 标签参考手册

查看全部 HTML 标签的语法、属性与示例。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。