如何为含/不含multiple属性的多个select绑定change事件

首先明确：带multiple属性的多选select，其change事件触发逻辑和普通单选select一致——只要选项的选中状态发生变化就会触发。你遇到的仅单选select触发的情况，大概率是代码执行时机不对，或者绑定方式存在疏漏。下面给出原生JS和jQuery的最优实现方案：

jQuery 实现方式 #

1. 静态元素直接绑定 #

如果页面加载时所有.my-select元素已经存在，直接绑定即可，兼容单选和多选场景：

// 确保在DOM加载完成后执行
$(function() {
  $('.my-select').on('change', function() {
    // 多选select用$(this).val()会返回选中值的数组，单选则返回单个值
    console.log('当前选中值:', $(this).val(), '触发元素:', this);
  });
});

2. 动态元素事件委托 #

如果后续会动态添加.my-select元素，用事件委托更高效（只绑定一次事件，无需重复绑定）：

$(function() {
  // 绑定到最近的固定父容器（比如#container），比绑定到document性能更好
  $('#container').on('change', '.my-select', function() {
    console.log('当前选中值:', $(this).val(), '触发元素:', this);
  });
});

原生JS 实现方式 #

1. 静态元素直接绑定 #

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
  const selects = document.querySelectorAll('.my-select');
  selects.forEach(select => {
    select.addEventListener('change', function() {
      // 原生获取多选select的所有选中值
      const selectedValues = Array.from(this.selectedOptions).map(opt => opt.value);
      console.log('当前选中值:', selectedValues, '触发元素:', this);
    });
  });
});

2. 动态元素事件委托 #

document.addEventListener('DOMContentLoaded', function() {
  // 绑定到固定父容器
  document.querySelector('#container').addEventListener('change', function(e) {
    if (e.target.classList.contains('my-select')) {
      const selectedValues = Array.from(e.target.selectedOptions).map(opt => opt.value);
      console.log('当前选中值:', selectedValues, '触发元素:', e.target);
    }
  });
});

排查原代码失效原因 #

你的原始代码本身逻辑没问题，失效大概率是因为：

• 代码在DOM元素加载前就执行了，导致没绑定到元素上；
• 部分旧浏览器（比如IE）中，多选select需要点击外部或按回车才会触发change事件，升级浏览器即可解决。

内容的提问来源于stack exchange，提问作者user2445278