javascript 中监听 select 的 change 事件需绑定到 select 元素，触发时通过 e.target.value 获取值、e.target.selectedoptions[0].text 获取文本；动态添加时应确保 dom 加载完成或使用事件委托。
在 JavaScript 中监听下拉选择框（<select></select>）的 change 事件，核心是绑定事件监听器，并在触发时读取用户选中的值或文本。关键点在于：事件需绑定到 select 元素本身，而不是其内部的 option；且 change 在选项真正改变并失去焦点（或回车确认）时才触发——对下拉框来说，通常选中即触发。
获取选中值和文本
在 change 回调中，可通过 event.target（或直接用 DOM 元素）访问当前 select 的属性：
-
select.value→ 返回选中option的value属性值（最常用） -
select.selectedOptions[0].text→ 获取选中项的显示文字 -
select.selectedIndex→ 返回选中项的索引（从 0 开始）
基础绑定方式（原生 JS）
推荐使用 addEventListener，避免覆盖已有事件：
const selectEl = document.getElementById('mySelect');
selectEl.addEventListener('change', function(e) {
const value = e.target.value;
const text = e.target.selectedOptions[0].text;
console.log('选中值：', value, '文字：', text);
});
注意：不要用 onchange = function() {...}，它只能绑定一个处理函数。
处理动态添加的下拉框
如果 select 是后期通过 JS 插入页面的，直接查找不到元素会导致绑定失败。解决方案有二：
- 确保脚本在 DOM 加载完成后再执行（如放在
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
