select 的合法直接子元素仅有 option 和 optgroup，其他标签会被移出；optgroup 仅作分组容器、不可选且不提交 label 值；二级菜单需两个独立 select 配合 js 实现。
select 和 option 必须严格嵌套，不能塞 div 或 span
浏览器解析 select 时只认直接子元素 option 和 optgroup，其他标签一律被“修复”——也就是移出 select 外部，变成独立 DOM 节点。结果是选项消失，或者页面上莫名其妙多出一个空 select 和一堆孤立的 option。
常见错误写法：<select><div><option>A</option></div></select> → 实际解析为：<select></select><div><option>A</option></div>
-
select的合法直接子元素只有：option、optgroup，或二者混合（如option+optgroup+option） -
optgroup内部只能放option，不能嵌套另一个optgroup - 想加图标、描述文字或额外结构？得用 JS 模拟下拉，原生
select不支持
optgroup 只是分组容器，不是可选项
optgroup 的 label 属性只用于显示分组标题，它本身不可选、没有 value、不能加 selected 或 disabled。浏览器会直接忽略这些属性。
典型误用：<optgroup label="硬件" disabled><option value="gpu">显卡</option></optgroup> → disabled 无效，所有 option 仍可选。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 真正禁用某类选项，必须给每个
option单独加disabled - 想让分组有默认提示，只能靠第一个
option：<option value="" disabled selected>— 请选择硬件 —</option> -
optgroup.label不会随表单提交，后端收不到这个值
多级菜单不是靠嵌套 select，而是两个独立 select 配合 JS
HTML 标准里根本没有“二级下拉”这种东西。optgroup 不是二级菜单，它不响应点击、不支持展开、也不产生新选择事件。
所谓“选完大类再选小类”，实际是：select name="category" 控制一级，JS 监听它的 change 事件，然后动态重置另一个 select name="product" 的 option 列表。
- 两个
select的name必须不同，否则表单提交时字段会被覆盖或合并成数组 - 不要把二级
option写死在 HTML 里（尤其在 Vue/React 中），否则状态和 DOM 不同步 - 移动端要注意：
change在 iOS 上可能延迟触发，建议加blur兜底
value 为空字符串时，后端收到的是 ""，不是 null 或 undefined
当用户选中 <option value="">— 请选择 —</option> 并提交表单，该字段值就是空字符串。这不是 bug，是规范行为。
- 后端必须明确处理空字符串，不能假设它等价于未提交或 null
- 如果希望“未选择”不发字段，就得用 JS 提交前校验：
if (select.value === '') { /* 阻止提交或提示 */ } -
select没有placeholder属性，写上去完全无效
原生 select 的结构约束比多数人想的更硬——它不是“能用就行”的标签，而是语义和解析规则高度绑定的表单控件。最容易被忽略的，其实是 optgroup 的不可交互性和两级 select 的命名隔离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
