select.value是唯一可靠的数据锚点，因其由浏览器直接控制选中项和提交值，而selectedIndex和options[i].selected在动态操作或多选时易出错；需用selectedOptions读取多选值，input事件实时捕获所有选择变化。
HTML原生表单没有自动数据绑定，select控件的“绑定”本质是手动同步value属性和input事件。
为什么select.value是唯一可靠的数据锚点
浏览器只通过select.value决定当前选中项（单选）或提交值（多选），selectedIndex在动态增删option时容易错位，options[i].selected在多选场景下需遍历且易漏判。
- 设初始值：直接赋
select.value = "beijing"，比操作options[0].selected = true更简洁、稳定 - 读取当前值：始终用
select.value，哪怕select.multiple === true——此时它返回第一个选中项的value，但这是标准行为，不是bug - 多选时获取全部值：必须手动遍历
select.selectedOptions，而不是依赖value；select.value本身不会变为空数组或逗号分隔字符串 - 禁用状态要清空
value：否则启用后残留旧值，select.disabled = true后应同步执行select.value = ""
input事件比change更适合实时同步
change只在失焦后触发，用户切换选项后立刻点击按钮，可能拿到旧值；input在每次选择变化时立即触发，包括键盘导航选中、鼠标点击、甚至select.value = "xxx"的JS赋值（只要该赋值发生在用户交互上下文中）。
- 监听
input：确保所有选择动作都被捕获，包括用方向键切换选项 - 避免监听
click或blur：前者不覆盖键盘操作，后者无法区分是否真有变化 - 动态插入的
select必须在appendChild后立刻绑定input事件，不能等DOMContentLoaded再统一查 - 若用
innerHTML = ...重写包含select的父容器，事件监听器和当前value会丢失——得先const v = select.value，再重建，再select.value = v并重新绑定
多选select的值提取和回填要绕开value陷阱
select.multiple时，select.value永远只返回字符串（首个选中项），不能反映真实多选状态。必须用selectedOptions集合读取，用options集合+循环设置回填。
立即学习“前端免费学习笔记（深入）”；
- 读取全部选中值：
Array.from(select.selectedOptions).map(opt => opt.value) - 回填多个选项：
for (const opt of select.options) { opt.selected = selectedValues.includes(opt.value); } - 别用
select.value = ["a", "b"]：这会静默失败，或只设第一个 - 如果选项是动态生成的，回填前确保
opt.value与数据一致——textContent或dataset.id不可靠，只有value属性被提交
最容易被忽略的是：select的value属性在JS中可读可写，但它和DOM属性value不是双向镜像；你改了JS变量，不手动同步到select.value，UI就不会变；反之亦然。所谓“绑定”，就是你亲手在两者之间架那根线，没捷径。
