option的value是提交值，text是显示文本；value为html属性，决定后端接收的字符串，text是标签内文本节点，仅用于渲染显示，二者必须分离且不可混淆。
option 的 value 是提交值，text 是显示文本
value 是 HTML 属性，决定表单提交时发给后端的字符串；text 不是属性，而是 <option>显示文本</option> 中的文本节点。浏览器渲染下拉菜单时只显示 text，但提交时只用 value。
常见错误现象：
- 后端收到
"py"却期望"Python"→ 前端把缩写写进了value - 用
option.text修改后，发现提交值没变 → 因为改的是显示文本，不是value - 没写
value，靠默认行为 → 此时value确实等于text，但一旦写了value，二者就完全解耦
JavaScript 里读取 value 和 text 的方式不同
option.value 直接读取 HTML value 属性（DOM 属性），option.text 或 option.textContent 读取标签体内的纯文本。注意：option.innerText 受 CSS 隐藏影响，不推荐用于逻辑判断。
典型用法：
- 获取选中项的提交值：
selectEl.options[selectEl.selectedIndex].value - 获取选中项的显示文字：
selectEl.options[selectEl.selectedIndex].text - 动态设置显示文本：
opt.textContent = "新名称"（不影响value） - 动态设置提交值：
opt.value = "new-key"（不影响显示）
datalist 的 option 只认 value，text 完全无作用
datalist 不是表单控件，它只是为 <input> 提供自动补全建议。<datalist><option value="js">JavaScript</option></datalist> 中的 “JavaScript” 仅作提示，用户点击后，input.value 被设为 "js"，不是 "JavaScript"。
容易踩的坑：
- 在
value里写中文或带空格的描述（如value="前端开发工程师"）→ 浏览器匹配不稳定，尤其大小写、空格敏感 - 误以为
input.value和option.textContent总一致 → 实际上它们毫无关联 - 给
datalist加required→ 无效，校验必须落在绑定的input上，且需 JS 或后端验证是否属于预设value集合
label 属性在 option 中基本不可靠
<option label="Label1">TextContent1</option> 在 Chrome/Edge/Safari 显示 Label1，Firefox 仍显示 TextContent1 —— 这个差异从 2011 年起就存在，至今未统一。不要依赖 label 控制显示内容。
真正可控的方式只有两个：
- 靠
value决定提交值 - 靠标签体文本（即
text）决定显示内容
如果需要“显示名”和“提交键”分离，又不想让用户看到缩写，就把完整名称写进标签体，把简短键名放进 value，再配合后端映射表处理 —— 这是最稳妥的路径。其他绕路方案（比如用 data-* 存额外信息）会增加维护成本，且不解决根本问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
