本文详解在 Greasemonkey 脚本等受限环境中，通过原生 JS 模拟 Select2 的值设置与事件触发（如 select2:select），解决因仅触发 change 事件导致级联下拉（如 hall 下拉框）无法加载的典型问题。
本文详解在 greasemonkey 脚本等受限环境中，通过原生 js 模拟 select2 的值设置与事件触发（如 `select2:select`），解决因仅触发 `change` 事件导致级联下拉（如 hall 下拉框）无法加载的典型问题。
Select2 是基于 jQuery 的增强型下拉组件，其内部逻辑不仅监听原生 change 事件，更依赖自定义事件（如 select2:select、select2:open）来驱动联动行为（例如动态加载二级选项、启用禁用状态切换）。在 Greasemonkey 或 Tampermonkey 环境中，若仅通过原生 DOM 操作设置 <select> 的 value 并派发 change 事件（dispatchEvent(new Event('change'))），往往无法激活 Select2 的后续逻辑——因为 Select2 的业务代码通常绑定在 select2:select 等自定义事件上，而非原生事件。
✅ 正确触发流程（兼容纯 JS 与 jQuery 混合环境）
虽然问题答案中最终借助了 jQuery 的 trigger() 方法，但纯 JavaScript 同样可实现等效效果，关键在于创建并派发 Select2 所监听的自定义事件：
// 假设 orgSelect 是已初始化 Select2 的 <select> 元素（HTMLSelectElement）
const orgSelect = document.getElementById('organization');
// 1. 设置原始 select 的 value（必须先设置，否则事件无意义）
orgSelect.value = 'org-123';
// 2. 触发原生 change 事件（用于同步 Select2 显示层）
orgSelect.dispatchEvent(new Event('change', { bubbles: true }));
// 3. 触发 Select2 自定义事件：select2:select（核心！驱动级联逻辑）
const select2SelectEvent = new CustomEvent('select2:select', {
bubbles: true,
detail: {
params: {
data: { id: 'org-123', text: 'Example Org' } // 模拟选中项数据（部分版本需要）
}
}
});
orgSelect.dispatchEvent(select2SelectEvent);⚠️ 注意事项：
- bubbles: true 必须设置，因 Select2 事件监听器常绑定在父级容器或 document 上；
- detail.params.data 字段非强制，但某些 Select2 版本（尤其结合 Yii 框架时）会依赖该结构触发 AJAX 加载逻辑；
- 若目标页面未暴露 jQuery 到 unsafeWindow，切勿强行注入 jQuery；优先使用上述纯 JS 方案。
? 如何定位真实触发事件？
当标准事件无效时，推荐以下调试步骤：
立即学习“Java免费学习笔记（深入）”；
- 使用浏览器开发者工具 → Elements 面板，右键目标 <select> → Break on → Attribute modifications，观察初始化后哪些属性被动态添加（如 data-select2-id）；
- 在 Event Listeners 面板 中展开该元素，筛选 select2 相关事件，重点关注 select2:select、select2:unselect、change 的监听位置；
- 若事件绑定在祖先节点（如 .form-group），需向上查找并直接向该父元素派发事件。
✅ 最终验证效果
执行上述代码后，应能观察到：
- 组织下拉框显示新选中项；
- hall 下拉框自动启用（disabled 属性移除）；
- hall 的 <option> 选项通过 AJAX 动态填充（可通过 Network 面板确认请求发出）。
总结：Select2 的行为控制权不在原生 change 事件，而在其自定义事件体系。掌握 select2:select 的手动触发方式，是自动化操作 Select2 级联下拉的核心技能——无论是否使用 jQuery，本质都是精准投递 Select2 所订阅的事件信号。
