html 下拉选择框是表单里面非常常用的组件，主要使用 select 标签来实现，搭配 option 标签编写每一个选项，作用就是让用户不用输入文字，直接点开下拉列表选择一项内容，在注册页面筛选条件地区选择商品分类这类场景大量使用。它属于原生表单控件，不需要额外引入第三方组件，浏览器自带渲染样式，可以直接放进 form 表单里面，表单提交的时候会把选中选项对应的 value 值传给后端。很多新手容易把它和输入框单选框搞混，html 下拉选择框的特点是默认只显示当前选中项，点击之后才会展开全部选项，节省页面横向空间，适合选项数量比较多的情况，如果需要同时选择多个选项，还可以给 select 开启 multiple 属性，变成多选下拉框。
基础标签结构
html 下拉选择框核心是两层标签，外层 select，内部每一条选项写 option 标签，option 标签的 value 是提交给后端真正的数据，标签中间文字是用户肉眼看到的选项名称。
基础代码结构
常用属性说明
| 属性 | 所属标签 | 功能说明 |
|---|---|---|
| name | select | 表单提交的字段名称，表单提交必须写 name，否则后端接收不到 html 下拉选择框的数据 |
| id | select | 给控件设置唯一标识，方便 js 获取这个 html 下拉选择框 |
| multiple | select | 开启多选，按住 ctrl 可以同时选中多个选项 |
| size | select | 直接展开显示指定数量选项，不再是收起的下拉形态 |
| disabled | select | 禁用整个 html 下拉选择框，用户不能点击选择，表单提交也不会传这个控件数据 |
| selected | option | 默认选中某一项，页面加载完成就显示这个选项 |
| value | option | 选项真实提交值，和显示文字可以不一样 |
| optgroup | 分组标签 | 对下拉选项做分组归类，长列表下拉框推荐使用 |
完整基础示例代码
代码里面第一个option是空value，一般作为提示项，也就是请选择，配合前端校验，防止用户没有选择就直接提交表单。selected写在北京这个option上，页面打开默认选中北京。
分组下拉选择框示例
当选项数量很多的时候，可以使用optgroup做分组，提升可读性
optgroup的label就是分组标题，分组标题本身不能被用户选中。
配合JavaScript获取选中值
html下拉选择框经常需要前端动态判断用户选中内容，js可以通过value属性读取当前选中option的value，也可以监听change事件，用户切换选项的时候触发代码执行。
监听切换事件的核心逻辑
第一步 获取select元素
第二步 绑定change事件
第三步 读取select的value拿到选中值
第四步 根据选中值执行对应的业务逻辑，比如联动二级下拉框
这里补充一个高频业务，二级联动下拉，选择省份之后，自动更新城市这个html下拉选择框里面的option选项，这个是项目里面非常经典的应用。
样式相关注意点
原生html下拉选择框的下拉展开面板样式，不同浏览器默认外观不一样，很多css属性对展开的下拉列表支持有限，如果需要高度自定义美化下拉外观，一般会使用div模拟下拉组件，原生select适合普通业务，优先保证功能稳定。
常见踩坑点
1 忘记写name属性，form提交之后后端拿不到html下拉选择框选中的数据
2 混淆option中间显示文字和value，后端拿到的是value，不是页面上看到的中文文字
3 开启multiple多选之后，表单传参格式和单选不一样，后端要按照多值数组接收
4 动态新增option之后没有刷新，部分旧浏览器需要重新渲染下拉选择框
【常见问题】
问题1 html下拉选择框怎么设置默认选中
回答1 html下拉选择框想要默认选中，在对应的option标签添加selected属性，页面加载完成这个选项就会自动成为选中项。
问题2 html下拉选择框可以实现多选吗
回答2 html下拉选择框可以实现多选，给select标签添加multiple属性，用户按住ctrl就可以同时选中多个选项。
问题3 html下拉选择框表单提交传的是中文文字吗
回答3 html下拉选择框表单提交默认传递option的value值，并不是option标签中间显示的中文文字，开发的时候要区分这两个内容。
问题4 html下拉选择框怎么用js监听选项切换
回答4 html下拉选择框可以给select绑定change事件，用户切换选项的时候触发事件，在事件函数里面读取下拉选择框当前选中的value。
【免责申明】
本文内容基于html表单原生规范整理，仅用于html下拉选择框入门学习，不同浏览器对原生select渲染和css支持存在差异，正式项目开发请参考W3C官方规范并做多浏览器测试，本文不替代官方标准文档。
