直接设置 select.value 即可选中匹配项，无需遍历；多选框需手动设置 option.selected；未写 value 的 option 默认取文本内容，但建议显式定义；赋值后需手动 dispatch change 事件。
直接设置 select.value 就行，不用遍历选项
绝大多数场景下，给 select 元素直接赋值就能选中匹配 option 的项，前提是该 option 有明确的 value 属性。浏览器会自动查找第一个 value 相等的 option 并设为选中状态。
常见错误是手动循环 select.options、比对 option.value 再设 option.selected = true —— 完全没必要，既慢又容易出错（比如没 break、忽略 disabled 项）。
-
select.value = "abc"会选中<option value="abc"></option>，哪怕它在第 10 个位置 - 如果多个
option的value都是"abc"，只选中第一个 - 如果没找到匹配项，
select.value赋值后不会报错，但select.selectedIndex变成-1，且界面无变化 - 对
<select multiple></select>无效 —— 多选框必须用option.selected手动控制
value 没写时，select.value 取的是 textContent
如果某个 <option></option> 没写 value 属性，比如 <option>北京</option>，那它的 value 值默认等于其文本内容（即 "北京"）。所以 select.value = "北京" 也能选中它。
但要注意：这个行为依赖浏览器解析，如果文本含空格、换行或前后有空白，value 默认值也会带这些字符，导致赋值不匹配。建议始终显式写 value：
<option value="beijing">北京</option>
- 避免因空格、不可见字符导致赋值失败
- 方便后端接收统一格式（比如英文 key），而不是中文字符串
- 防止用户复制粘贴选项文本时意外影响逻辑
赋值后要触发 change 事件？得手动 dispatch
单纯设 select.value = "xxx" 不会触发 change 事件，监听函数收不到通知。如果你依赖 change 做后续操作（如联动更新、表单校验），必须手动触发：
select.value = "shanghai";
select.dispatchEvent(new Event('change', { bubbles: true }));
- 不加
{ bubbles: true }，事件可能无法被父级监听到 - IE 不支持
Event构造函数，需用document.createEvent兼容（现代项目通常可忽略） - 别用
select.onchange()或select.change()—— 这些不是标准方法，会报错
多选框（multiple）不能靠 value 一键设置
<select multiple></select> 的 value 是只读属性，赋值无效。必须遍历 options，逐个设 selected：
const valuesToSelect = ["apple", "banana"];
for (const option of select.options) {
option.selected = valuesToSelect.includes(option.value);
}
- 别用
select.value = [...]—— 语法错误，value是字符串，不是数组 - 注意：设完后
select.value返回的是第一个选中项的value，不是全部，别拿它做判断依据 - 如果需要“全选/反选”，直接操作
option.selected更可靠，比基于value匹配更直观
value 赋值，或者以为没写 value 的 option 就没法被程序选中。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
