最简下拉菜单直接用文本即可，无需JS和CSS；需避免内嵌HTML、value含空格或特殊字符、多个selected等错误。
怎么用原生 <select></select> 写最简下拉菜单
直接写 <select></select> 包住 <option></option> 就行，不用 JS、不配 CSS 也能跑。浏览器原生支持 Tab 切换、方向键上下选、屏幕阅读器识别，结构干净，语义正确。
常见错误现象：<option></option> 里塞了 <span></span> 或 emoji → 渲染为空白或被忽略；value 值带空格或未闭合引号 → 表单提交值错乱；多个 selected → 行为不一致，只第一个生效。
-
value必须是合法字符串（推荐纯英文/数字，避免空格、中文、特殊符号） - 默认选中项加
selected属性，仅限一个<option></option> - 禁用整个控件，在
<select></select>上加disabled；只禁某一项，在对应<option></option>上加 - 占位提示（如“请选择…”）要同时加
disabled和selected，且value=""
multiple 属性开启多选后为什么不像传统下拉？
因为原生 <select multiple></select> 不是“点击展开”的下拉，而是始终展开的多行列表——它本质是个滚动选择框，不是弹层。这是规范行为，不是 bug。
常见错误现象：设了 multiple 却没设 size → Chrome 默认显示约 4 行，Firefox 可能撑满容器；设 size="1" → 外观像单选下拉，但行为仍是多选（需 Ctrl/Cmd 点击）；移动端点一下就收起 → iOS Safari 的原生限制，无法绕过。
立即学习“前端免费学习笔记（深入）”；
-
size控制可见行数，比如size="3"显示 3 行选项，不设则按浏览器默认（通常 4） - 必须用
select.selectedOptions获取选中值，select.value只返回第一个或空字符串 - 表单提交时，同名参数会重复发送：
tags=js&tags=css&tags=html，后端需按数组接收 - iOS Safari 完全不支持触屏多选，哪怕加了
multiple，用户也只能单选
在表格 <td> 里放 <code><select></select> 有什么坑？
可以放，也推荐放——只要不指望 <option></option> 里渲染 HTML 或复杂样式。原生方案最稳，尤其对管理后台类表格。
常见错误现象：给 <select></select> 加 padding 没反应 → 实际渲染层是浏览器私有控件，CSS 作用有限；想用 background-color 给选项上色 → 全部失效；动态插入 <option></option> 后焦点丢失 → 用了 innerHTML += 而非 select.add(new Option())。
- 不要在
<option></option>中写任何 HTML 标签，只允许纯文本 - 联动填值时，从事件源出发用
this.closest('tr')定位当前行，别硬写parentNode.parentNode - 动态增删行必须用事件委托监听
change，不能直接绑在每个<select></select>上 - 移动端点击后立即收起是 iOS 特性，不是代码问题；若强求体验，得换 JS 模拟组件
什么时候该放弃原生 <select></select>？
当需求明确超出原生能力边界时再动 JS：需要搜索过滤、图标、分组折叠、自定义滚动条、高亮关键词、支持鼠标悬停预览、或统一桌面/移动端多选体验。
容易被忽略的点：原生 <select></select> 在 Windows Chrome/Firefox 下，border-radius、background、font-size 等样式部分失效；<optgroup></optgroup> 的 label 无法用 CSS 单独控制颜色或字体；iOS Safari 对 multiple 的支持形同虚设——这些不是你代码写错了，是平台限制。
真要定制，保留隐藏原生 <select></select> 用于表单提交，再用 <div>+<button>+<ul> 模拟 UI，否则可访问性和键盘导航会崩。</ul></button>
</div>
