如何使用JavaScript实现点击select下拉选项后触发alert弹窗

• 原因1：JS执行时DOM未完成加载
  你的JS代码如果在DOM元素渲染完成前就执行，document.querySelectorAll('.group-select')会返回空节点列表，没有绑定到任何select元素的事件，自然不会触发alert。
  解决方法：将JS逻辑包裹在DOM加载完成的回调中，或者直接放在页面底部</body>标签之前：

  document.addEventListener('DOMContentLoaded', () => {
    const selects = document.querySelectorAll('.group-select');
    selects.forEach((elem) => {
      elem.addEventListener('change', (event) => {
        alert(selects.length);
      });
    });
  });
  

• 原因2：Bootstrap Select插件的事件冲突
  你给select元素添加了selectpicker类，说明使用了Bootstrap Select第三方样式插件，该插件会隐藏原生select元素，自行渲染下拉UI，部分版本会拦截原生的change事件，导致绑定的原生事件不触发。
  解决方法：使用插件官方提供的changed.bs.select事件监听：

  // 引入jQuery的场景
  document.addEventListener('DOMContentLoaded', () => {
    $('.group-select').on('changed.bs.select', () => {
      alert($('.group-select').length);
    });
  });
  

  无jQuery的场景可以使用事件委托实现兼容：

  document.addEventListener('change', (e) => {
    if (e.target.matches('.group-select')) {
      alert(document.querySelectorAll('.group-select').length);
    }
  });
  

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