自定义select菜单绑定addEventListener的change事件不触发的解决方法

这个自定义select实现是用div模拟下拉选项交互，原生的<select>元素被设置了display: none完全隐藏，用户点击的都是模拟生成的div元素。
虽然选项点击的回调里通过JS修改了原生select的selectedIndex属性，但通过JavaScript直接修改表单元素的选中状态，不会自动触发原生的change事件，所以你绑定的监听函数永远不会执行。

在选项点击回调里，更新完原生select的selectedIndex之后，手动给select元素派发change事件即可。
找到你代码中选项click事件的对应逻辑，在选中状态更新的逻辑块里插入一行派发事件的代码：

c.addEventListener("click", function(e) {
  var y, i, k, s, h, sl, yl;
  s = this.parentNode.parentNode.getElementsByTagName("select")[0];
  sl = s.length;
  h = this.parentNode.previousSibling;
  for (i = 0; i < sl; i++) {
    if (s.options[i].innerHTML == this.innerHTML) {
      s.selectedIndex = i;
      h.innerHTML = this.innerHTML;
      y = this.parentNode.getElementsByClassName("same-as-selected");
      yl = y.length;
      for (k = 0; k < yl; k++) {
        y[k].removeAttribute("class");
      }
      this.setAttribute("class", "same-as-selected");
      // 新增下面这行代码，手动触发change事件
      s.dispatchEvent(new Event('change'));
      break;
    }
  }
  h.click();
});

修改完成后，你之前写的change监听代码就能正常工作，选中选项时控制台会打印对应选项的value值。

注：原代码末尾的h.click()是触发模拟选中div的点击事件，和原生select的事件没有关联，无法触发你绑定的change回调。

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