使用纯JS设置Select2值并触发事件

Question

我正在使用油脂猴用户脚本来重新设计 UI 并在一些奇怪的网站上自动执行初始输入，该网站使用 jQuery 和 Select2。

我处理包含两个选择的行：

• 组织（加载选项，选择空选项，启用选择控制）
• 大厅（无选项，已禁用）。

我需要在第一个选项中进行选择，以强制第二个选项加载相应选项并启用。

让我们命名 orgSelect 是一个带有附加事件的 HTMLSelectElement，orgSpan 是一个带有附加事件的“select + span > span.selection > span”元素，由 Select2 创建。

我可以设置 orgSelect.value （显然）。

我可以为 orgSelect 调度“change”事件并查看呈现的选定值。但第二次选择没有任何反应。

我可以单击 orgSpan 期待下拉操作（我什至在网上看到过这样的示例并且它有效），但这对我不起作用。 orgSpan.click() 上没有下拉菜单。

所以，我可以为select2设置值，但是如何正确触发它？

Answer 1

Wellp...不知怎的，我找到了正确的事件链。但我没有用纯JS测试过。因为，首先我决定尝试从“不安全”窗口使用 jQuery，自从它工作以来我做了下一个：

• 将代码重写为 jQuery；
• 编写了用于添加事件处理程序的包装器，并将它们导出到“不安全”窗口；
• 发现从dispatchEvent()切换到jQuery.trigger()后行为没有改变（我可以设置和渲染值，但在此之后没有进一步的操作 - 看起来开发人员不使用“change”事件那个动作）
• 发现开发人员使用 YII 并在这方面搜索了问题
• 发现在主选择值更改后，辅助选择组件甚至没有初始化为 Select2()
• 经过数十次尝试并在 html 正文中查看不同的事件后，我找到了启动操作的事件：

    orgSelect.val(orgId);
    orgSelect.trigger('change'); // rendering new value
    orgSelect.trigger('select2:select'); // starting actions for secondary <select>