selected属性动态设置无效的根本原因是DOM中attribute与property分离，浏览器仅依据property决定选中状态；应优先使用option.selected=true操作property，而非setAttribute修改attribute。
为什么 selected 属性动态设置后下拉项没选中
直接赋值 option.selected = true 或设置 option.setAttribute('selected', '') 在某些场景下无效，根本原因是：DOM 中的 selected 属性（attribute）和元素的 selected 状态（property）是两个不同概念。浏览器只根据 property 决定当前是否选中，而 setAttribute 只修改 attribute，不触发 property 同步。
常见错误现象：
– 页面加载后手动调用 setAttribute，但下拉框无变化
– 使用 jQuery 的 .attr('selected', true) 无效（jQuery 1.6+ 已区分 attr / prop）
– Vue/React 等框架中直接操作原生 DOM 属性未触发响应式更新
- 优先使用
option.selected = true（操作 property，立即生效） - 避免用
setAttribute('selected', ...)，它仅影响 HTML 源码中的初始状态 - 若必须用属性方式（如服务端渲染标记），需配合
select.value = 'xxx'或select.selectedIndex = n强制同步
select.value 和 select.selectedIndex 哪个更可靠
两者都能控制选中项，但行为细节不同：select.value 依赖 option 的 value 属性值匹配；selectedIndex 则按索引定位，不依赖 value 内容。
- 当
option没有显式value属性时，select.value会取textContent，容易因空格、换行导致匹配失败 -
selectedIndex更稳定，尤其在动态生成选项、value 不可控时 - 设置
select.value = 'xxx'会自动查找首个匹配的option并设其selected = true，但若无匹配项，不会报错，也不会改变当前选中 - 设置
selectedIndex = -1可清空单选下拉框（多选需单独处理）
动态添加 option 后设置 selected 失效怎么办
典型场景：用 select.appendChild(option) 新增选项后立刻执行 option.selected = true，但实际未选中。这是因为新插入的 option 尚未被浏览器纳入 select 的内部选项列表（HTMLSelectElement.options 集合）——该集合是实时更新的，但部分浏览器存在微小延迟或同步时机问题。
立即学习“Java免费学习笔记（深入）”；
- 确保
option已真实挂载到select下再操作：select.appendChild(option); option.selected = true; - 更稳妥的做法是操作父级
select：添加完后直接设select.selectedIndex = select.options.length - 1 - 避免在
documentFragment中批量添加后再统一 append —— 此时options长度未更新，selectedIndex可能越界 - 不要依赖
option.getAttribute('selected')判断状态，它永远返回null（除非 HTML 中硬编码了 selected 属性）
多选下拉框（multiple）中 selected 的特殊处理
多选框中单个 option.selected = true 是有效的，但要注意：它不会自动清除其他已选中的项，也不会触发 change 事件（除非用户交互）。更重要的是，如果用 select.value 获取值，它只返回第一个选中项的 value（非数组），不符合预期。
- 获取所有选中值应遍历
select.options，检查每个option.selected === true - 清空多选框不能用
select.value = ''，而要用循环设option.selected = false或重置select.selectedIndex = -1（部分浏览器支持，但兼容性不如遍历） - 动态设置多个选项时，避免在循环中反复触发 layout（如读取
offsetHeight），可先收集索引，再批量操作 - 注意 Safari 对
option.selected的同步较慢，必要时加requestAnimationFrame延迟读取状态
最易被忽略的一点：selected 是一个“状态”，不是“指令”。一旦 DOM 结构变化（如重新渲染、innerHTML 覆盖），之前通过 JS 设置的 selected property 会丢失，且不会自动恢复 —— 这不是 bug，是 DOM 的正常行为。需要你在结构变更后，主动重新同步状态。
