直接用selectElement.options[selectElement.selectedIndex].text可获取选中项显示文本；select.value只返回value属性值而非可见文本，如Grapes中value为"1"而text才是"Grapes"；未选中时selectedIndex为-1，需先判断有效性；监听应使用change事件而非input以确保兼容性。
直接用 selectElement.options[selectElement.selectedIndex].text 就能拿到当前选中项的显示文本，不需要 jQuery，也不依赖 value 属性。
为什么不能用 select.value？
select.value 返回的是 的 value 属性值，不是用户看到的文字。比如：
<option value="1">Grapes</option>
此时 select.value === "1"，但你要的“Grapes”得从 .text 属性读。
常见错误现象：表单提交后后端收不到中文名或描述性文字，只收到数字 ID —— 很可能就是误用了 .value。
selectedIndex 为 -1 或 0 时怎么安全取值？
下拉框初始状态、禁用占位项（如 ）会导致 selectedIndex 为 0 或 -1，直接访问 .options[selectedIndex].text 会出错或填入无意义内容。
实操建议：
- 先判断
select.selectedIndex > 0，跳过第一个禁用项 - 或者显式排除
disabled状态：select.options[select.selectedIndex].disabled === false - 未选中时（
selectedIndex === -1）应设为空字符串或保持原值，避免覆盖已有内容
用 change 还是 input 事件监听？
必须用 change。
input 在 上行为不一致：Chrome 支持，Safari 和部分移动端浏览器不触发；而 change 是标准语义，用户确认选择（点击选项、回车、Tab 切出）后才触发，避免重复执行和误同步。
性能影响小，但兼容性和逻辑清晰度差别很大——尤其在 iOS Safari 中，input 几乎不可靠。
jQuery 用户注意 option:selected 的边界情况
jQuery 写法 $("#mySelect option:selected").text() 看似简洁，但有坑：
- 如果多个
都带selected属性（HTML 允许，但语义错误），它会取第一个匹配项的.text()，未必是用户最新选中的 - 如果下拉框被 JS 动态重置过，但没清除旧的
selected属性，option:selected可能指向错误节点 - 更稳的方式仍是走原生路径：
$("#mySelect")[0].options[$("#mySelect")[0].selectedIndex].text
真正容易被忽略的点：很多开发者以为“用了 jQuery 就不用管 DOM 状态”，但 的真实选中状态只存在于 selectedIndex，而不是 HTML 属性快照。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
