直接读取 select 元素的 value 属性可获取当前选中项的值，多选时需用 selectedOptions；change 事件监听值变化，设置选中推荐赋值 value。
直接读 select 元素的 value 属性最简单
不需要遍历 option，也不用判断 selected，现代浏览器对 元素原生支持 value 属性自动返回当前选中项的 value 值（或文本内容，当选项没设 value 时）。
前提是 DOM 已加载完成，且元素有明确的 id 或能被正确选取：
const selectEl = document.getElementById('mySelect');
console.log(selectEl.value); // 直接输出选中项的 value 字符串- 如果所有
都设置了value，selectEl.value就是那个值 - 如果某个
没写value（例如），它的value默认为文本内容，此时selectEl.value会是"北京" - 若下拉框是多选（
multiple），value只返回第一个选中项的值，这时必须改用selectedOptions
多选下拉框必须用 selectedOptions 遍历
select.multiple === true 时，select.value 不可靠，它只反映首个选中项，且无法得知全部选择。真正安全的方式是读取 selectedOptions 类数组对象：
const multiSelect = document.getElementById('myMultiSelect');
const selectedValues = Array.from(multiSelect.selectedOptions).map(opt => opt.value);
console.log(selectedValues); // ['sh', 'gz', 'sz']-
selectedOptions是实时的、只读的HTMLCollection，包含所有当前被选中的 - 务必用
Array.from()或展开语法[...multiSelect.selectedOptions]转成数组，才能调用map、filter等方法 - 不要用
options配合selectedIndex—— 多选时selectedIndex只返回第一个选中索引，其余丢失
监听变化要用 change 事件，不是 click 或 input
下拉框值改变后，触发的是 change 事件，不是 click（点击不等于选中改变），也不是 input（input 对 select 无效）：
立即学习“前端免费学习笔记（深入）”；
document.getElementById('mySelect').addEventListener('change', function() {
console.log('新选中值：', this.value);
});-
change在用户操作完成、焦点离开或选项确定后才触发，语义准确 - 如果想“实时响应”（比如搜索联想），得配合其他交互逻辑，原生
select不支持输入过程中触发 - 动态插入
option后，无需重新绑定事件——事件委托或直接绑定在select上都可生效
注意空值、禁用项和默认选中逻辑
select.value 在无任何选项被选中时返回空字符串 ""，但实际中往往有隐含默认行为：
- 如果 HTML 中写了
，则初始value是空字符串（因该option无value属性） - 禁用的
不会被计入选中状态，select.value会跳过它，取下一个有效选中项；若全禁用或无selected，结果为"" - JavaScript 设置选中时，推荐用
select.value = 'xxx'（比操作option.selected = true更简洁），浏览器会自动匹配并滚动/高亮对应项
真正容易出问题的，是假设“有默认选项就一定有值”，而忽略空 value 和 disabled selected 的组合效果。动手前先检查 HTML 源码里每个 option 的 value 和 selected 状态。
