value属性必须显式设置，否则提交时值为空字符串；应使用简洁无歧义的标识符如"admin"而非中文；JavaScript读取选中值应直接用select.value而非textContent。
value属性必须显式设置，不能依赖文本内容
HTML <option> 的 value 不会自动取标签内的文本。如果漏写 value，提交表单时该选项的值是空字符串（""），哪怕界面上显示的是“北京”“上海”。浏览器不会帮你“猜”值。
- 正确写法：
<option value="bj">北京</option> - 错误写法：
<option>北京</option>→ 提交时得到value="" - 若想让 value 和文本一致，仍需手动写：
<option value="北京">北京</option>
value里别放空格、中文或特殊字符（除非你明确要）
value 是后端接收和程序逻辑判断的依据，建议用简洁、无歧义的标识符。比如用户角色选“管理员”，value 写 "admin" 比 "管理员" 更安全——避免编码问题、空格截断、大小写敏感等麻烦。
- 推荐：
<option value="active">启用</option> - 慎用：
<option value="启用状态">启用</option>（可能因 URL 编码或 JSON 序列化出错） - 特别注意：空格开头/结尾会被 trim 掉，
value=" yes "实际提交为"yes"
JavaScript读取选中值时，永远读 select.value，不是 option.textContent
很多人误以为要遍历 option 找选中项再取文本，其实完全没必要。原生 <select> 元素自带 value 属性，直接读它最准、最快。
const select = document.getElementById('mySelect');
console.log(select.value); // 直接拿到当前选中的 value 字符串
// 不要用：
// const selected = select.options[select.selectedIndex];
// console.log(selected.textContent); // 错！这是显示文字，不是提交值
- 多选
<select multiple>时，select.value只返回第一个选中项，得用select.selectedOptions遍历 - 动态插入
<option>时，务必同步设置value，否则新增项的值仍是空字符串
后端收到空值？先检查有没有意外覆盖了 value
常见陷阱：用 JS 动态生成 <option> 时，拼字符串漏了 value=；或者用模板引擎（如 Jinja2、Thymeleaf）渲染时，变量为空导致 value="" 被写死；又或者用了 Vue/React 的 v-model / value 绑定但初始值没设对，导致 DOM 中 <option value=""> 被选中。
立即学习“前端免费学习笔记（深入）”；
- 调试技巧：右键审查元素，看实际渲染出的
<option>标签是否带value，且非空 - 服务端验证不能只信前端传来的 value，尤其当它可能是空字符串时，得结合业务逻辑判断是否合法
