本文详解在 Greasemonkey 脚本等无 jQuery 环境下，通过原生 JavaScript 操作 Select2 组件：设置选中值、模拟用户选择行为，并触发其内部依赖的 select2:select 等关键事件，确保联动逻辑（如二级下拉加载）正常执行。
本文详解在 greasemonkey 脚本等无 jquery 环境下，通过原生 javascript 操作 select2 组件：设置选中值、模拟用户选择行为，并触发其内部依赖的 `select2:select` 等关键事件，确保联动逻辑（如二级下拉加载）正常执行。
Select2 是一个广泛使用的增强型下拉组件，但其事件机制与原生 <select> 不同：仅触发 change 事件通常不足以激活依赖逻辑（如动态加载二级选项、启用禁用控件等）。尤其在 Yii 等框架集成场景中，开发者常监听 select2:select 这类自定义事件而非原生 change，导致纯 JS 设置 value + dispatchEvent('change') 失效。
✅ 正确触发流程（纯 JS 实现）
虽然答案中使用了 jQuery 的 .trigger('select2:select')，但在 Greasemonkey 等环境需避免依赖 jQuery。可通过以下方式纯 JavaScript 模拟 Select2 的核心事件：
// 假设 orgSelect 是已初始化 Select2 的原生 <select> 元素
const orgSelect = document.getElementById('organization');
// 1. 设置 value 并同步到 Select2 内部状态
orgSelect.value = 'org_123';
// 2. 触发原生 change 事件（更新 UI 显示）
orgSelect.dispatchEvent(new Event('change', { bubbles: true }));
// 3. 关键步骤：手动触发 Select2 自定义事件 select2:select
// 注意：Select2 v4+ 使用 CustomEvent，且需携带 data 对象（模拟真实选择）
const select2Event = new CustomEvent('select2:select', {
bubbles: true,
detail: {
params: {
data: {
id: 'org_123',
text: 'Example Organization' // 可选，但部分逻辑依赖此字段
}
}
}
});
orgSelect.dispatchEvent(select2Event);⚠️ 重要前提：该方法要求目标页面已加载 Select2，并将事件监听器绑定在 <select> 元素本身（Select2 v4+ 默认行为）。可通过 console.log(orgSelect.hasAttribute('data-select2-id')) 快速验证是否已初始化。
? 为什么 click() 或 dispatchEvent('click') 无效？
Select2 的下拉展开由其内部事件代理控制（如监听 .select2-selection 的点击），直接对原始 <select> 或 .selection span 调用 click() 无法穿透 Select2 的事件拦截层。且 Greasemonkey 的沙箱环境可能限制跨上下文事件冒泡，故应优先操作 Select2 绑定的原始 DOM 元素并触发其约定事件。
立即学习“Java免费学习笔记（深入）”；
? 实用技巧与注意事项
- 事件顺序不可颠倒：必须先设置 value → 触发 change → 再触发 select2:select；否则 Select2 可能读取旧值。
- 兼容性检查：若页面使用 Select2 v3，事件名为 select2-selecting（非 select2:select），建议通过 getEventListeners(orgSelect)（Chrome DevTools）确认实际监听的事件名。
-
二级联动保障：触发 select2:select 后，若二级 <select> 仍未启用或无选项，可补充等待微任务确保异步逻辑执行：
setTimeout(() => { const hallSelect = document.getElementById('hall'); console.log('Hall enabled?', !hallSelect.disabled, 'Options:', hallSelect.options.length); }, 100); - 安全上下文提示：Greasemonkey 脚本默认运行在沙箱中，若页面通过 window.$ 注入 jQuery，可使用 unsafeWindow.jQuery(...) 调用（需声明 @grant unsafeWindow），但纯 JS 方案更稳定、无需额外权限。
掌握 Select2 的事件契约（而非仅 DOM 行为），是自动化脚本成功驱动复杂表单的关键。始终以 select2:select 作为“用户完成选择”的信号，而非 change —— 这既是 Select2 的设计约定，也是解决联动失效的最可靠路径。
