原生 select 是唯一满足表单提交、键盘导航、屏幕阅读器识别及移动端系统级调用的方案；手写 div+ul 下拉菜单会引发焦点丢失、闪退、字段不提交、无障碍失效等问题。
为什么不能用 div + ul 手写“下拉菜单”
浏览器原生 select 是唯一能同时满足表单提交、键盘导航（Tab/方向键/Enter）、屏幕阅读器识别、移动端系统级选择器调用的方案。手写 div 模拟，90% 场景会掉进这些坑：
• 点击后焦点丢失或无法用键盘操作
• 移动端点开即闪退（iOS Safari 尤其明显）
• 表单提交时 name 字段完全不出现
• 屏幕阅读器读不出选项，或把分组标题当可选项
• disabled 状态需手动模拟，且无法阻止 JS 读取值
select 和 option 的嵌套结构必须严格闭合
select 只能直接包含 option、optgroup，不能塞 div、span 或错位写 option 在外面——浏览器会自动“修复”，结果是选项消失或变成并列两个下拉框。
正确写法只有这几种：
-
select>option -
select>optgroup>option -
select>option+optgroup+option
错误示例：<select><div><option>A</option></div></select> → 浏览器解析为 <select></select><div><option>A</option></div>，选项彻底丢失。
optgroup 不是“可选的下拉项”，只是视觉分组容器
optgroup 的 label 属性只用于显示分组标题，它本身不可选、无 value、不能加 selected 或 disabled。常见误用：
- 给
optgroup加disabled="true"—— 无效，浏览器忽略 - 期望点击分组标题触发选择 —— 不会响应任何交互
- 在后端收到
optgroup.label值 —— 它根本不会被提交
真正想禁用某类选项，得给每个 option 单独加 disabled；想让分组有默认提示，只能靠第一个 option value="" disabled selected。
多级菜单 ≠ 多层 select 嵌套
HTML 标准里没有“多级下拉”的原生标签。所谓“二级菜单”，实际是两个独立 select：第一个选中后，JS 动态生成第二个的 option 列表。强行用 optgroup 做二级是错的——它不支持嵌套，也不支持点击展开。
- 一级
select name="category"控制大类（如“硬件”“软件”） - 二级
select name="product"的option必须由 JS 根据一级值重置，不能靠 HTML 结构预埋 - 如果用框架（Vue/React），也要避免把二级
option写死在模板里，否则状态不同步
最易被忽略的一点：二级 select 的 name 必须和一级区分开，否则表单提交时会被覆盖或合并成数组，后端收不到预期字段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
