结论：select是容器，option必须嵌套其中，否则仅渲染为普通文本；漏name或value导致表单无法提交有效值。浏览器仅识别合法嵌套结构，option脱离select即失去交互功能，且multiple、selected、disabled等属性须按规范使用，否则影响选中逻辑与数据传递。
直接说结论： select 是容器，option 必须嵌在它里面；漏掉包裹、写错位置、或没设 value，表单就收不到值。
为什么
浏览器只认嵌套结构：option 离开 select 就只是普通文本，不会变成可选项目。常见错误包括：
- 把
option直接丢在body里，结果页面只显示“北京”“上海”几个字，点不了 - 误写成自闭合标签：
<select></select>—— HTML 不允许，解析失败，整个下拉框消失 -
select没闭合，后面所有option都被当成文本渲染
怎么设置默认选中和占位提示？
靠 selected 属性，但要注意语义和交互逻辑：
- 想默认选中某项：给对应
option加selected，比如<option value="shanghai" selected>上海</option> - 想加“请选择…”提示且不让用户再选它：用
disabled+selected组合，如<option value="" disabled selected>请选择城市</option> - 多个
option同时带selected？浏览器只认第一个，其余忽略
multiple 多选模式下容易踩哪些坑？
加了 multiple 属性后，行为和视觉都变了，但很多人没注意：
- 用户必须按住
Ctrl（Windows/Linux）或Cmd（macOS）才能多选，单纯点击只会切换当前项 —— 这不是 bug，是规范行为 - 提交时，同名字段会以逗号分隔字符串形式发送（如
hobby=reading,music），后端需按此格式解析，不能当单值处理 - 如果希望显示更多选项，加
size="4"控制可见行数；不加的话，多数浏览器只显示一行，用户得拖滚动条 -
name带方括号（如name="hobby[]"）是 PHP 等语言的惯用写法，纯 HTML 不需要，也不影响原生提交
optgroup 分组时 label 属性为什么没显示？
optgroup 的 label 是必需属性，但它只在支持语义渲染的浏览器中可见，且有硬性限制：
-
label值不能为空，也不能含 HTML 标签，否则整个optgroup可能被跳过 -
optgroup不能嵌套，也不能放option以外的标签（比如span或注释） - 部分旧版 iOS Safari 对
optgroup渲染异常，建议测试真机，必要时降级为纯option+ 文本前缀（如 “【水果】苹果”）
最常被忽略的一点：表单提交依赖 name 和 value 的配合。没有 name，服务器根本收不到这个字段；option 没 value，提交的就是空字符串或文本内容本身——而后者在不同浏览器中行为不一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
