动态添加option必须先挂载select到dom，否则旧版浏览器中选项不渲染；推荐用select.value设值并派发change事件，禁用单个选项应设option.disabled而非select.disabled，分组更新需重建optgroup结构。
动态添加option时，必须先挂载select再操作
直接用document.createElement('option')创建后立即appendChild到未插入DOM的select，在部分旧版浏览器或严格模式下会失败——选项不渲染、select.options.length为0。这不是bug，而是HTML规范要求：只有已挂载的select才能正确管理子option节点。
实操建议：
- 先用
document.body.appendChild(select)（或插入到目标容器）确保select已存在DOM树中 - 再调用
select.add(new Option(text, value))或select.appendChild(option) - 若用
new Option()构造，注意它在IE中兼容性更好；现代写法可用document.createElement('option')配合option.value和option.textContent赋值 - 避免在
head中执行动态添加逻辑，除非监听DOMContentLoaded
设置默认选中项，优先用select.value而非selectedIndex
用select.selectedIndex = 1硬设位置，一旦后续JS或用户操作导致选项增删（比如级联筛选中清空重填），索引就错位，可能选中错误项甚至selectedIndex = -1导致界面空白。
实操建议：
- 统一用
select.value = "xxx"，它自动匹配option[value="xxx"]并滚动高亮 - 确保该
value字符串完全一致（包括大小写、空格、类型）；"1"和1不等价 - 赋值后如需触发校验或联动，手动派发事件：
select.dispatchEvent(new Event('change', { bubbles: true })) - 清空单选
select：设select.value = ""（前提是存在value=""的占位选项）；否则用select.selectedIndex = -1
disabled属性只作用于单个option，别误加在select上
想禁用“已下架商品”这个选项，却给整个select加了disabled，结果用户连其他有效选项都点不了——这是最常发生的配置错位。
实操建议：
- 禁用单个选项：直接写
<option value="discontinued" disabled>已下架</option>，或JS中option.disabled = true - 禁用整个下拉框：才对
select元素设disabled，且此时所有option状态无关紧要 - 禁用项不参与表单提交，也不计入
select.selectedOptions，调试时检查这个集合比查select.value更可靠 - 移动端Safari对
disabled视觉反馈弱，可加style="color:#999"辅助识别
用<optgroup></optgroup>分组时，label不能动态绑定到JS变量
<optgroup label="Category A"></optgroup>里的label是静态HTML属性，无法像Vue/React那样响应式更新。试图用optgroup.label = newLabel或setAttribute('label', ...)，浏览器不会重绘分组标题。
实操建议：
- 分组结构变更必须重建整个
select：先清空select.innerHTML = ''，再按新数据重新生成optgroup和option - 若仅内容更新（比如某组内选项增删），可只操作对应
optgroup下的子节点，但不要动label本身 - 服务端返回数据时，建议带分组元信息（如
{ group: "Fruits", options: [...] }），前端按结构批量渲染，避免散点更新 - 注意
<optgroup></optgroup>不能嵌套，也不能作为select的唯一子元素（至少得有一个option）
select.selectedOptions.length是否为0，尤其当所有新选项都disabled时，用户看到的是空白下拉框，但控制台毫无报错。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
