自定义select下拉框onchange事件失效，无法获取选中值弹出alert

• 核心触发失效原因：原生change事件仅对<input>、<select>、<textarea>这类内置表单元素生效，作为自定义组件外层容器的<div class="custom-select" id="Select">本身不存在内置的选中状态变更触发逻辑，直接给该div绑定onchange事件，永远不会因为选项选择动作触发回调，与你怀疑的禁用逻辑无直接关联。
• 禁用逻辑中容易引发连带失效的边界问题：
  • 页面加载读取URL参数terminKlasse后隐藏自定义Select容器时，若在隐藏逻辑块中误写了移除自定义Select事件监听的代码，后续容器重新显示时就会出现交互无响应
  • 禁用#defaultSelect原生元素时，若代码逻辑交叉给自定义Select容器加了pointer-events: none属性，会直接拦截所有选项的点击动作，导致交互完全失效

1. 重构事件触发逻辑，放弃依赖原生change事件的方案
   不要在外层自定义div上绑定原生onchange，直接将选中后的处理逻辑绑定到每个下拉选项的点击动作上：
   • 用户点击自定义下拉的某个选项时，先将选中的文本、对应值存入自定义Select容器的自定义数据属性（比如$('#Select').data('selected-value', 选中项的值)）
   • 选项点击触发后直接执行alert展示逻辑，不需要等待事件冒泡到外层div
     参考核心实现代码结构：

   // 绑定所有自定义下拉选项的点击事件（仅初始化时绑定一次，不要在过滤逻辑中重复绑定）
   document.querySelectorAll('.custom-select .option-item').forEach(option => {
     option.addEventListener('click', function() {
       // 更新自定义select的选中展示文本
       document.querySelector('.custom-select .selected-label').textContent = this.textContent.trim();
       // 存储选中值
       document.getElementById('Select').dataset.selectedValue = this.dataset.value;
       // 直接执行弹窗逻辑
       alert(`选中内容：${this.textContent.trim()}`);
       // 收起下拉列表
       document.getElementById('Select').classList.remove('show-dropdown');
     })
   })
   

2. 拆分Klassenfilter过滤逻辑的操作边界，避免代码交叉误操作
   • 页面加载读取terminKlasse参数时，严格区分操作对象：隐藏自定义Select容器仅修改其display样式，禁用#defaultSelect仅修改其disabled属性和对应样式，不要在这两个逻辑块中互相修改对方的状态、移除对方的事件监听
   • 点击过滤按钮切换不同select的显示/禁用状态时：
     • 重新显示自定义Select容器时，仅修改可见性样式，不要重新执行事件绑定代码（重复绑定会引发事件多次触发、甚至绑定失效）
     • 切换原生defaultSelect的禁用状态时，不要修改自定义Select容器的pointer-events、user-select等会拦截鼠标交互的属性
3. 快速排查阻断点的调试方法
   • 在选项点击回调的最开头加一行console.log('选项点击触发')，如果控制台完全没有输出，说明点击动作被样式拦截，重点检查是否误加了pointer-events: none
   • 如果控制台有输出但alert未弹出，说明被过滤逻辑的条件分支拦截，检查过滤判断的代码是否存在提前return、跳过后续执行的问题

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