代码之家 › 专栏 › 技术社区 › Eduard Kolodka

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

greasemonkey jquery-select2 jquery javascript

0

Eduard Kolodka · 技术社区 · 2 年前

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

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

组织(加载选项,选择空选项,启用选择控件)
大厅(无选择,禁用)。

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

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

我可以设置orgSelect.value(显然)。

我可以为orgSelect调度“更改”事件,并看到所选值的呈现。但第二选择没有任何进展。

我可以点击orgSpan,期待下拉操作(我甚至在网上看到过这样一个例子,它很有效),但这对我不起作用。在orgSpan.click()上没有下拉操作。

所以,我可以设置select2的值,但如何正确触发它?

0 回复 | 直到 2 年前

1

0

Eduard Kolodka 2 年前

嗯。。。不知怎么的,我找到了合适的事件链。但我没有在纯JS中测试它。因为,首先我决定尝试从“不安全”窗口使用jQuery,由于它有效,我做了下一步:

将代码重写为jQuery;
编写了用于添加事件处理程序并将其导出到“不安全”窗口的包装器;
发现从dispatchEvent()切换到jQuery.triger()后,行为没有改变(我可以设置和呈现值,但在此之后没有进一步的操作开始-看起来开发人员不会对这些操作使用“更改”事件)
发现开发人员使用了YII,并在谷歌上搜索了这个问题
发现在主选择值更改后,辅助选择组件甚至没有初始化为Select2()
经过几十次尝试并在html主体中查找不同的事件后,我找到了启动操作的事件(它附加到select2组件的一个父级):

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