value是提交值，text是显示文本，二者完全独立；未设value时浏览器自动用text作为value；常见错误包括拼写错误、误用getAttribute、未配onChange导致卡死。
value 是提交给后端的值，显示文本是用户看到的内容 —— 二者完全独立，改一个不影响另一个。
option 的 value 属性只在表单提交或 JS 读取时生效
浏览器不会用 value 控制下拉框里显示什么文字；它只决定：
– 表单提交时，这个 option 被选中后发给服务器的是哪个字符串
– JavaScript 中调用 selectElement.value 或 selectElement.options[i].value 读到的是什么
常见错误现象：
– 后台收不到预期值，查了半天发现前端写了 valule="abc"（拼错）
– 用 getAttribute('value') 判断是否选中 → 返回 null 或初始值，不是当前选中项的值
– 在 React/Vue 中只设 value 属性但没配 onChange → 下拉框卡死无法切换
实操建议：
– 提交前务必确认 value 是合法字符串（避免空格、未转义引号）
– 不要依赖 value 做界面渲染逻辑，它不参与 DOM 渲染
– 需要服务端识别的 ID、编码、状态码等，一律塞进 value，别放中文或带空格的描述
text 是 option 标签体内容，不是属性
text 不是 HTML 属性，而是 中的文本节点。JavaScript 中通过 option.text 或 option.textContent 读取它，但它本身不能用 value 属性控制。
容易踩的坑：
– 写成 → text 属性无效，浏览器忽略
– 误以为 option.text = "new" 会自动同步更新 value → 不会，两者完全解耦
– 用 innerHTML 替换 option 内容时忘了重设 value → 显示变了，提交值还是旧的
使用场景：
– 多语言界面：显示“美国”，value 仍为 "us"
– 数据迁移：显示文案大改，但后端字段名不变，只需改标签体，不动 value
– 用户友好提示：显示 “请选择…”，但 value 设为空字符串或 "--"，方便后端校验
没写 value 时，浏览器自动回退到 text
如果某个 没写 value，那它被选中时，select.value 就等于 "Apple" —— 这是浏览器默认行为，不是框架或库加的逻辑。
参数差异：
– → value 是 "apple"，text 是 "苹果"
– → value 和 text 都是 "苹果"
– → value 是空字符串，text 是 "请选择"
性能 / 兼容性影响：
– 所有现代浏览器都支持该回退机制，无需 polyfill
– 但服务端必须能处理空 value 或纯中文 value，否则可能报错
– 避免在 value 里塞长文本（如整段说明），增加传输体积且难做后端枚举校验
最常被忽略的一点：value 和 text 的同步必须由开发者显式维护。比如用 JS 动态生成 option 列表时，value 来自数据 ID 字段，text 来自 name 字段 —— 少写一个点（item.id 写成 item.name），提交就错，但界面看起来完全正常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
