Select2 触发 change 事件的正确处理方式

3次阅读

使用 select2 后原生 `change` 事件监听失效，是因为 select2 将原始 `

当为触发，而是由 Select2 内部管理。因此，你原先为 level1、level2 等元素绑定的 addEventListener(‘change’, …) 将完全失效——即使用户在 Select2 界面中选择新值，原生 change 事件也不会自动派发。

✅ 正确做法是： 监听 Select2 自定义事件，并在回调中显式调用你的业务逻辑函数（如 eventFunction()），同时手动触发原生 change 事件以保持与现有代码的兼容性 。

以下是适配 Select2 的关键修改步骤：

在 add() 方法中，完成 Select2 初始化后，替换原生事件绑定逻辑：

add(options) {const el = document.getElementById(options.target);     const $el = $(el); // 转为 jQuery 对象（Select2 依赖 jQuery）// 初始化 Select2（可选配置）$el.select2({width: '300px',         placeholder: ` 请选择 ${options.target}`,         allowClear: true     });      const elsDependsOn = options.dependsOn.length === 0          ? []          : options.dependsOn.map(id => document.getElementById(id));     const eventFunction = this.createPopulateDropDownFunction(el, elsDependsOn);      // ✅ 关键：监听 Select2 事件，而非原生 change     $el.on('select2:select select2:unselect', () => {eventFunction(); // 执行级联逻辑         el.dispatchEvent(new Event('change', { bubbles: true})); // 兼容原生监听器     });      // ❌ 移除这行（原生 change 不再被触发）// targetObject.elsDependsOn.forEach(depEl => depEl.addEventListener("change", eventFunction));      this.targets.push({el, elsDependsOn, func: eventFunction});     return this; }

若 level1、level2 等都需要搜索能力，应在 initialize() 或 eazyDropDown() 中统一初始化：

initialize() {     this.targets.forEach(t => {const $el = $(t.el);         if (!$el.data('select2')) {$el.select2({ width: '300px'});         }     });     // 首次填充数据     this.targets.forEach(t => t.func());     return this; }