JavaScript 中监听 select 的 change 事件需绑定到 select 元素，触发时通过 e.target.value 获取值、e.target.selectedOptions[0].text 获取文本；动态添加时应确保 DOM 加载完成或使用事件委托。
在 JavaScript 中监听下拉选择框（<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() {...}，它只能绑定一个处理函数。
立即学习“Java免费学习笔记（深入）”；
处理动态添加的下拉框
如果 select 是后期通过 JS 插入页面的，直接查找不到元素会导致绑定失败。解决方案有二：
- 确保脚本在 DOM 加载完成后再执行（如放在
</body>前，或用DOMContentLoaded） - 使用事件委托：监听父容器的
change事件，再判断event.target是否为select
document.body.addEventListener('change', function(e) {
if (e.target.tagName === 'SELECT') {
console.log('动态下拉被切换：', e.target.value);
}
});
常见注意事项
不推荐在 change 中直接操作 DOM 后立即读取 value，因为异步渲染可能未完成；若需响应式更新其他控件，建议先保存值，再用 setTimeout(..., 0) 或 queueMicrotask 延迟读取。另外，change 不会在用户点击相同选项时再次触发——它只响应“变化”，不是“点击”。
