是语义正确、可访问、键盘友好的原生下拉菜单方案，支持tab切换、方向键导航和屏幕阅读器；应避免手写+替代，确保aria、焦点管理和键盘逻辑完备。
用 <select></select> 和 <option></option> 就能实现基础下拉菜单
浏览器原生支持的下拉菜单不需要 JavaScript 或 CSS 框架，<select></select> 是语义正确、可访问、键盘友好的首选方案。它天然支持 Tab 切换、空格/回车展开、方向键导航和屏幕阅读器识别。
常见错误是试图用 <div> + <code><ul></ul> 从零手写下拉，结果忽略焦点管理、ARIA 属性和键盘行为，反而降低可用性。
-
<select></select>必须包含至少一个<option></option>，否则可能不渲染或行为异常 - 默认选中项用
selected属性，不要只靠 JS 设置value - 禁用状态统一用
disabled（作用于<select></select>或单个<option></option>），别用pointer-events: none - 移动端 iOS Safari 对
<select></select>样式限制极多，自定义外观基本不可行；如强需视觉定制，得用 JS 模拟，但必须补全 ARIA 和键盘逻辑
给 <select></select> 加样式要注意哪些兼容性问题
Chrome/Firefox 允许修改 padding、border、font 等，但箭头图标、下拉指示符无法通过 CSS 直接控制。Safari 和旧 Edge 更严格，部分伪元素（如 ::-webkit-appearance）仅限特定版本。
- 隐藏原生箭头：用
appearance: none+background自定义图标，但必须加padding-right预留空间，否则文字被截断 - IE11 不支持
appearance，需用filter: alpha(opacity=0)配合绝对定位图层覆盖 - 高度设置要谨慎：
line-height与padding冲突时，Firefox 可能撑高容器；建议统一用height+box-sizing: border-box - 不要给
<select></select>设overflow: hidden，否则在 macOS Chrome 中下拉面板可能被裁剪
如何用 JavaScript 动态控制选项和选中值
操作 <select></select> 的 DOM 接口简单直接，但要注意同步 UI 与数据状态，避免“看起来选了，实际没变”这类问题。
- 获取当前选中值：
selectElement.value（返回value属性值）或selectElement.options[selectElement.selectedIndex].text（返回显示文本） - 设置选中项：
selectElement.value = "xxx"，比手动遍历options并设selected更可靠 - 动态添加选项：
selectElement.add(new Option("文本", "值"))，比innerHTML +=安全，避免重绘丢失焦点 - 禁用某选项：
optionElement.disabled = true，注意这不会影响value读取，只是 UI 和交互限制
为什么有时候点击没反应或选项不出现
多数是 HTML 结构或属性误用导致，不是浏览器 Bug。
-
<select></select>外层包裹了position: absolute且z-index过低，被其他元素遮挡（尤其表单里有<input>或<button></button>时） - 父容器设置了
transform或perspective，触发新层叠上下文，导致下拉面板渲染在错误层级 -
<option></option>缺少value属性，提交时该字段为空字符串，后端可能误判为未选择 - 在 Vue/React 等框架中直接操作 DOM 更新
<select></select>，但未同步更新组件 state，造成视图与数据不一致
下拉菜单真正的复杂点不在“怎么画出来”，而在“怎么让所有人——包括键盘用户、放大镜用户、语音指令用户——都自然地用上它”。样式可以妥协，语义和交互不能绕开。
