OPTION标签必须嵌套在SELECT或DATALIST中才能生效，孤立使用会被浏览器静默忽略；value属性缺失时文本内容自动回退为提交值，但推荐显式设置以避免空格和编码问题。
OPTION标签必须嵌套在SELECT或DATALIST中才能生效
<option> 本身没有独立语义，浏览器会忽略孤立使用的 <option>。它只在两种上下文中被解析：作为 <select> 的子元素（构成下拉菜单选项），或作为 <datalist> 的子元素（提供自动补全建议）。
常见错误是直接把 <option> 放在 <div> 或文档顶部，结果完全不显示，控制台也无报错——因为 HTML 解析器只是静默跳过。
- 正确写法：
<select><option value="a">A</option></select> - 错误写法：
<div><option>A</option></div>（无效，不渲染） -
<datalist id="dl"><option value="apple"></datalist>配合<input list="dl">才起作用
value属性缺失时，文本内容自动回退为值
如果省略 value 属性，表单提交或 JavaScript 读取 select.value 时，会取 <option> 的文本节点内容（即标签内文字）。但要注意空白字符处理和特殊字符编码问题。
例如：<option> yes </option> 提交后值为 " yes "（含首尾空格），而 <option value="yes"> yes </option> 提交值为 "yes"。
立即学习“前端免费学习笔记（深入）”；
- 推荐显式设置
value，尤其当显示文本含空格、换行或 HTML 实体时 - JavaScript 中用
option.value获取值，option.textContent获取原始文本（含空格） - 服务器端不要依赖客户端未设
value的<option>值做关键判断
selected属性与JavaScript动态选中行为差异
selected 是布尔属性，仅影响初始渲染状态；它不会响应后续 DOM 修改。想动态切换选中项，必须操作 select.selectedIndex 或 select.value，而非反复增删 selected 属性。
例如：<select><option selected>A</option><option>B</option></select> 加载时 A 被选中；但执行 document.querySelector('option:nth-child(2)').setAttribute('selected', '') 不会改变当前选中项。
- 初始默认选中：用
selected属性（仅一次有效） - 运行时切换：改
select.value = "xxx"或select.selectedIndex = 1 - 注意：设置
selectedIndex = -1可清空单选<select>（多选需遍历options手动取消）
disabled属性禁用单个选项但不影响整体表单提交
disabled 在 <option> 上表示该选项不可点击、不可键盘聚焦，但它仍参与 DOM 结构，且其 value 在表单提交时**仍会被发送**（只要它不是父 <select> 的当前选中项）——等等，不对：实际上，只有当前选中的 <option> 的值才会提交；disabled 的 <option> 本身不参与选中逻辑，所以只要它没被选中，就不会提交。真正影响提交的是父 <select> 是否 disabled。
关键点：单独给 <option> 加 disabled，只是视觉+交互禁用，不影响表单提交机制；但若整个 <select disabled>，则该字段**完全不提交**。
-
<option disabled>-- 请选择 --</option>常用于占位提示，用户无法选中它 - 禁用的
<option>在 CSS 中可通过option:disabled设置样式（如灰色） - 注意 Safari 对
option:disabled的支持较晚，旧版本可能不生效
实际开发中最容易漏掉的是 <option> 的父容器约束，以及误以为操作 selected 属性能实时更新选中状态——这两处一错，调试半天也看不出 DOM 问题在哪。
