基础下拉框用+即可，name决定提交字段名，value为提交值，标签内文字为用户所见；默认选中用selected属性，js操作应改select.value或selectedindex。
怎么用 <select></select> 写一个基础下拉框
直接写 <select></select> + 若干 <option></option> 就能跑，浏览器原生支持，不用 JS 也能交互。
关键点在于：name 属性决定表单提交时的字段名，value 是实际提交值，text（即标签内文字）才是用户看到的选项。
常见错误：漏掉 name 导致后端收不到数据；把中文直接塞进 value 而不转义（虽不报错但可能引发编码或空格问题）。
示例：
立即学习“前端免费学习笔记（深入）”；
<select name="category"> <option value="tech">技术文章</option> <option value="life">生活随笔</option> </select>
selected 和 defaultSelected 别混用
静态页面里设默认选中项，只用 selected 属性就行，比如 <option selected value="tech"></option>。
JS 动态操作时，别去改 selected 属性——它只影响初始渲染；应该直接改 select.value 或 select.selectedIndex。
容易踩的坑：
- 用
setAttribute('selected', true)不生效，因为 DOM 属性和 JS 属性不同步 - 在
DOMContentLoaded之前读select.value可能是空字符串，哪怕 HTML 里写了selected - 服务端渲染（如 SSR）后 JS 拦截赋值，要等节点挂载完再操作
下拉框宽度、样式和移动端适配
原生 <select></select> 的外观高度依赖系统和浏览器，CSS 控制能力有限。比如 background、padding 大部分浏览器支持，但 ::after 伪元素、border-radius 在 Safari/iOS 上常失效。
移动端尤其麻烦：iOS Safari 会强制弹出全屏选择器，无法自定义下拉面板；Android 各厂商 UI 差异大，有的甚至忽略 size 或 multiple。
实用建议：
- 设固定
width时，用min-width防止文字撑爆容器 - 需要完全定制样式？老老实实用
<div> + <code><ul></ul>模拟，配合aria-expanded和键盘导航 - 如果只是微调，加
appearance: none并手动补箭头背景图，但记得留出足够点击热区（至少 44×44px） - 移动端几乎无法多选——iOS 点击即关闭，Android 很少暴露多选入口
- 没有视觉反馈显示“已选几项”，用户容易误判是否成功
- 后端接收时要注意：PHP 默认把
name="x"当字符串，必须写成name="x[]"才解析为数组 - JS 获取值要用
Array.from(select.selectedOptions).map(o => o.value)，不是select.value
多选下拉框（multiple）的实际限制
加了 multiple 属性后，用户按住 Ctrl/Cmd 可多选，提交时字段变成数组（如 category[]=tech&category[]=life）。
但真实场景里问题不少：
多数情况下，不如拆成一组 <input type="checkbox">，可控性高得多。
原生下拉框看着简单，但每个属性背后都有兼容性毛刺，尤其是涉及焦点管理、键盘操作（如上下键切换）、屏幕阅读器支持时，细节远比想象中多。
