您现在的位置是：首页 > 知识问答网站首页知识问答

html 下拉列表最标准原生写法就是使用 select 标签，内部搭配 option 选项标签，select 是外层容器，option 代表每一个可选择的选项，这个下拉列表一般都是放在 form 表单里面使用，name 属性一定要加上，因为表单提交的时候后端就是依靠 name 属性识别这个下拉列表的数据，value 属性是选项真正提交的值，页面上展示给用户看的文字写在 option 标签内部，很多新手容易混淆 value 和显示文字，比如页面显示中文城市名称，但是提交给后端的是城市编码，这种是工程里非常常见的用法，原生 select 下拉列表优点是不需要引入 js，浏览器自带渲染，兼容性很好，缺点是样式很难深度自定义，外观由浏览器控制，如果需要高度美化带搜索分组多选效果，就要借助 js 或者组件库，下面会从基础语法属性完整代码分组多选禁用等进阶内容逐层讲解。

select 标签核心属性

属性	作用	常用取值
name	表单提交字段名，表单必加	自定义字段名称
id	元素唯一标识，可以配合 label 绑定	自定义 id
multiple	开启多选模式，按住 ctrl 或者 shift 多选	布尔属性，写 multiple 即可
size	同时展示多少个选项，默认是 1 也就是下拉收起状态	数字
disabled	整个下拉列表禁用，不能点击选择	布尔属性
required	表单原生校验，提交时必须选中一项	布尔属性

option 标签核心属性

属性	作用	说明
value	选项提交给后端的值	如果不写 value，默认提交标签内部文字
selected	默认选中该项	页面打开就预选这个选项
disabled	单独禁用某一个选项	该选项不能被用户选中

基础完整代码示例

请选择城市

北京

上海

广州

进阶写法 选项分组 optgroup

如果选项数量很多，可以使用 optgroup 标签给选项做分组，optgroup 里面设置 label 作为分组标题，分组标题不能被选中，适合分类多的下拉列表

北京

天津

上海

杭州

多选下拉列表写法

加上 multiple 属性之后，下拉列表变成可多选，这种模式不再是收起下拉，而是直接展示选项列表，提交的时候会同时传递多个选中值

阅读

运动

音乐

搭配 label 标签提升体验

给下拉列表绑定 label，点击文字就可以聚焦 select 输入框

选择城市

北京

制作 html 下拉列表的操作步骤

第一步 确定业务需求，确认是单选还是多选，是否需要选项分组

第二步 书写 select 外层标签，填写 name id 等基础属性

第三步 在 select 内部添加 option，每个 option 写 value 值和展示文字

第四步 如果需要默认选中，给对应 option 增加 selected 属性

第五步 如果是表单场景，把整个 select 放到 form 标签内部

第六步 打开浏览器测试，检查选项显示默认选中表单提交数据是否正常

原生 select 的局限说明

原生 html 下拉列表样式受浏览器控制，下拉弹出面板的字体背景颜色很难通过普通 css 修改，不支持内置搜索框，不能自定义下拉动画，如果项目需要搜索筛选级联联动美化皮肤，就需要结合 JavaScript 动态渲染 option，或者使用第三方下拉组件，原生 select 适合简单基础业务，复杂交互优先考虑 js 方案。

【常见问题】

问题 1 html 下拉列表提交之后后端拿到的是什么内容

回答 1 html 下拉列表提交的时候，后端获取的是选中 option 里面的 value 值，并不是 option 标签内部显示的文字，所以制作 html 下拉列表的时候，一定要正确设置 option 的 value 属性。

问题 2 html 下拉列表怎么设置默认选中项

回答 1 制作 html 下拉列表的时候，给需要预选的 option 标签加上 selected 属性，页面加载完成之后，这个选项就会成为 html 下拉列表默认选中的内容。

问题 3 html 下拉列表能不能实现多选

回答 1 html 下拉列表原生是支持多选的，只需要给 select 标签增加 multiple 属性，html 下拉列表开启多选之后，可以按住 ctrl 或者 shift 同时选中多个选项。

问题 4 html 下拉列表样式为什么改不动

回答 1 原生 html 下拉列表的下拉弹出层属于浏览器内置渲染，普通 css 很难修改下拉面板内部样式，这是原生 html 下拉列表本身的限制，深度美化 html 下拉列表一般需要借助 JavaScript 自定义实现。

【免责申明】

本文属于前端基础技术科普，HTML 标准和不同浏览器对 select 相关属性渲染存在差异，实际项目开发请结合浏览器兼容要求和后端接口规范制作 html 下拉列表，本内容不能替代正式项目设计与测试验证，不作为生产开发唯一依据。