select 标签是 HTML 里面的表单元素，作用是生成下拉选择框，用户可以从预设选项里面挑选一项，它一般和 option 标签搭配使用，select 本身只负责容器，每一个下拉选项都要写在 option 标签内部，这个标签广泛用在注册页面 筛选表单 地区选择 分类下拉这类场景，它属于原生表单控件，不需要引入额外 js 就能实现基础下拉功能，但是想要实现多选 默认选中 禁用 分组选项这些进阶效果，就要配合对应的属性，很多初学者容易把 select 和 input 下拉混淆，select 是独立标签，和 input 是两种不同表单控件，表单提交的时候 select 的 name 属性用来传递选中 option 对应的 value 值，这是开发里面最核心的要点。
核心基础结构
select 开始标签
option value 选项值 选项显示文字 /option
option value 选项值 选项显示文字 /option
/select 结束标签
基础含义
select 外层下拉容器
option 单个下拉选项
value 真正提交给后端的数据
标签内部文字 页面上用户看到的内容
常用属性说明
name 表单提交的字段名称，后端接收数据依靠这个属性
multiple 加上这个属性之后下拉框支持多选，按住 ctrl 或者 command 点击多个选项
size 设置下拉框默认展开的条目数量，默认是 1，也就是收起状态只显示一行
disabled 禁用整个 select，控件变灰，用户不能选择，并且提交的时候不会传值
required 设置必填，表单校验的时候，如果没有选择选项就会提示错误
option 标签配套属性
selected 写在 option 上面，表示这个选项默认被选中
disabled 单独禁用某一个 option 选项
value 选项对应的提交值
进阶标签 optgroup
optgroup 用来给下拉选项分组，属性 label 写分组标题，适合选项数量很多的页面，把同类选项归类展示，分组标题不能被用户选中。
属性对比表格
| 属性 | 所属标签 | 作用 |
|---|---|---|
| name | select | 表单传参字段名 |
| multiple | select | 开启多选模式 |
| size | select | 设置展开行数 |
| disabled | select | 禁用控件 |
| required | select | 表单必填校验 |
| selected | option | 默认选中项 |
| optgroup | 分组标签 | 选项分类展示 |
开发使用步骤
第一步，在表单里面写入 select 标签，先填写 name 属性，确定后端接收的字段名。
第二步，内部逐个添加 option，给每个 option 设置 value，填写用户可见的选项文字。
第三步，如果需要默认选中，就在目标 option 增加 selected 属性。
第四步，按需增加进阶属性，比如多选就加 multiple，必填就加 required。
第五步，如果选项数量庞大，使用 optgroup 做分组，提升页面可读性。
第六步，表单提交测试，确认拿到的是选中 option 的 value，不是页面显示文字。
补充拓展，原生 select 样式修改能力有限，下拉弹出层的样式很多浏览器无法自定义，如果需要高度自定义外观，一般会使用 js 框架模拟下拉组件，但是原生 select 标签优势是轻量，无障碍支持好，表单原生校验可以直接生效。
【常见问题】
问题 1，select 标签里面必须搭配 option 标签吗
回答 1，是的，select 标签本身只是下拉容器，select 标签里面的每一个可选项都必须使用 option 标签，没有 option 标签 select 标签就没有可选内容。
问题 2，select 标签怎么实现默认选中
回答 2，select 标签实现默认选中，是在对应的 option 标签上添加 selected 属性，不是写在 select 标签本身，页面打开之后这个 option 就会成为 select 标签默认选中项。
问题 3，select 标签可以支持多选吗
回答 3，可以，select 标签加上 multiple 属性之后就开启多选模式，select 标签多选的时候用户可以按住组合键选择多个选项，提交的时候会返回多个选中值。
【免责申明】
本文内容基于 HTML 标准原生 select 标签通用知识整理，不同浏览器对 select 标签渲染样式存在差异，新规范特性请参考最新 HTML 标准文档，本文仅作为前端学习参考。