如何为下拉选择框添加click或change类型的addEventListener事件？

你的问题出在原生<select>元素被隐藏，页面上实际交互的是Selectize生成的自定义DOM结构，直接给原生select绑定change事件不会响应用户操作——因为用户点击的不是原生控件。下面是两种靠谱的解决方案：

方案一：使用Selectize官方API监听事件 #

Selectize自身提供了稳定的事件监听机制，优先用官方API是最优解：

// 获取原生select元素
const selectEl = document.querySelector('.calc_custom_select');
// 获取已初始化的Selectize实例
const selectize = selectEl.selectize;

// 监听选择变化事件
selectize.on('change', function(selectedValue) {
  console.log('选中的值：', selectedValue);
  console.log('yeap');
});

注意：这段代码必须在Selectize完成初始化之后执行，否则selectEl.selectize会返回undefined。如果你的脚本在页面加载时运行，建议把代码放在DOMContentLoaded事件回调里，或者放在Selectize初始化代码的后面。

方案二：监听自定义下拉的点击事件（备选） #

如果无法通过API获取实例，可以直接监听Selectize生成的下拉选项点击（依赖DOM结构，稳定性略逊于API）：

// 用事件委托监听下拉选项容器的点击
document.querySelector('.selectize-dropdown-content').addEventListener('click', (e) => {
  // 定位被点击的选项元素
  const option = e.target.closest('[data-value]');
  if (!option) return;

  const selectedValue = option.getAttribute('data-value');
  console.log('选中的值：', selectedValue);
  console.log('yeap');

  // 可选：同步更新原生select的值并触发change事件
  const selectEl = document.querySelector('.calc_custom_select');
  selectEl.value = selectedValue;
  selectEl.dispatchEvent(new Event('change'));
});

为什么原生事件不生效？ #

页面里的<select>被设置了style="display: none;"，用户完全不会和它交互，所有操作都是在Selectize生成的.selectize-control、.selectize-dropdown这些自定义元素上进行的，所以原生的change事件自然不会触发。

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