使用 select2 后，原生 `change` 事件监听器失效，需改用 select2 的 `change.select2` 自定义事件，并确保在初始化后绑定，而非监听原生 `
Select2 并非简单美化原生
要让依赖联动逻辑（如级联下拉）在 Select2 环境中正常工作，必须将事件监听迁移到 Select2 提供的专用事件机制上：change.select2。
✅ 正确做法：绑定 change.select2 事件
在你的 DropDown.add() 方法中，不应再对 elsDependsOn 中的原生 （该逻辑对 Select2 无效），而应在每个 Select2 初始化后，对其 jQuery 包装对象 监听 change.select2：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
add(options) {
const el = document.getElementById(options.target);
const $el = $(el); // 获取 jQuery 对象（必需）
const elsDependsOn = options.dependsOn.length === 0
? []
: options.dependsOn.map(id => document.getElementById(id));
const eventFunction = this.createPopulateDropDownFunction(el, elsDependsOn);
// ✅ 关键：初始化 Select2，并监听其自定义 change 事件
$el.select2({ width: '300px' });
$el.on('change.select2', () => {
eventFunction();
console.log('Selected:', $el.val());
});
// ❌ 移除这行（原生 change 不触发）
// targetObject.elsDependsOn.forEach(depEl => depEl.addEventListener("change", eventFunction));
const targetObject = { el, elsDependsOn, func: eventFunction };
this.targets.push(targetObject);
return this;
}⚠️ 注意：change.select2 事件仅在用户通过 Select2 UI（点击选项、键盘选择、清空等）显式修改值时触发；程序调用 $el.val(...).trigger('change') 也需手动触发 .trigger('change.select2') 才能同步响应。
? 同时适配原生与 Select2？（可选增强）
若你希望同一套 DropDown 类既能用于原生
// 在 add() 内部判断是否已初始化 Select2
if ($el.data('select2')) {
$el.on('change.select2', eventFunction);
} else {
el.addEventListener('change', eventFunction);
}但更推荐职责分离：为 Select2 场景单独封装一个 DropDownWithSelect2 子类，或统一初始化所有目标
? 补充说明
- Select2 的 change 事件是 namespaced（命名空间化）的，必须写全 change.select2，仅写 change 无效；
- 确保 jQuery 和 Select2 JS/CSS 已正确加载，且 $(el).select2() 调用在 DOM 就绪之后；
- 若需初始值触发联动（如页面加载后默认选中），请在 initialize() 中手动调用 eventFunction()，或对首个下拉框触发一次 $el.trigger('change.select2')。
遵循以上改造，你的级联下拉即可在拥有搜索功能的同时，保持完整的依赖更新逻辑。
