无法使用 onchange 函数模拟 <select> 元素上的点击事件答案

【问题标题】：unable to simulate click event on <select> element with onchange function无法使用 onchange 函数模拟 <select> 元素上的点击事件
【发布时间】：2018-05-26 09:39:05
【问题描述】：

我正在开发一个使用 chrome 插件来操作网站内容并添加更多功能的项目。

我有一个<select> 元素要操作：

<select id="thePage:form:pBlock:address:addressTypeSelectionDropdown" name="thePage:form:pBlock:address:addressTypeSelectionDropdown" size="1" onchange="onchangeOfPicklist();">    
    <option value="User Entry">User Entry</option>
    <option value="CustomerID">CustomerID</option>
    <option value="Closest to Customer">Closest to Customer</option>
    <option value="Location">Location</option>
    <option value="Customer's Address" selected="selected">Customer's Address</option>
</select>

我想在特定的 if 条件下更改选择选项，但这似乎不管我做什么都行不通。到目前为止，我几乎尝试了所有方法，但似乎 onchange 触发器正在发挥作用，否则单击模拟并尝试更改选项似乎不起作用。到目前为止，我尝试了不同的方法，但它们似乎都没有触发选项：

let customerAddress = labelAddress.parent().next().first().find("select");
customerAddress.children('[value="Closest to Customer"]').trigger("change");

还有：

customerAddress.children('[value="Closest to Customer"]').attr("selected", "selected");
customerAddress.children('[value="Closest to Customer"]').change();

和

customerAddress
.find('option:Closest to Customer')
.prop('selected',true)
.trigger('change');

甚至模拟按键：

let e = jQuery.Event("keydown");
e.which = 13; // # enter
customerAddress.focus();
customerAddress.trigger(e);

这里我不知道为什么没有触发事件。

我在添加事件监听，控制台没有提示事件触发：

document.addEventListener("keydown", function (event) {
console.log("KeyPress: " + event.which);
});

或者像这样：

let e = jQuery.Event("keydown");
e.which = 13; // # enter 
customerAddress.focus();
customerAddress.attr("size", 5);
customerAddress.children('[value="Closest to Customer"]').focus();
customerAddress.children('[value="Closest to Customer"]').trigger(e);

请注意，我正在开发 chrome 插件，我只能更改此插件的源代码并操作网页上的元素，无法更改网页/脚本和函数的源代码。

我的问题是，有没有办法触发<select> 元素中嵌入的onchange 函数？

https://jsfiddle.net/zlobul/sb8js1we/11/

【问题讨论】：

在let customerAddress = labelAddress.parent().next().first().find("select"); 中，labelAddress 是什么？
let labelAddress = $("label:contains('Address Type')"); 如果这是您想知道的，我会正确获取元素。我可以操纵
是的，我想知道。 :)
你的label在哪里？你能尝试用所有涉及的元素对问题进行有效的 sn-p 吗？
这是它的样子：jsfiddle.net/zlobul/sb8js1we/3

标签： javascript typescript drop-down-menu

【解决方案1】：

更改事件是在select 元素级别而不是option 触发的，所以：

let customerAddress = labelAddress.parent().next().first().find("select");
customerAddress.change();

应该做到这一点并为选择元素触发change 事件。如果你想设置值使用 val() ：

customerAddress.val("Closest to Customer");

见Set an option value as selected

【讨论】：

这只是触发值的变化，不会触发变化事件。在我的情况下不起作用...
查看文档：api.jquery.com/change -“注意：使用 JavaScript 更改输入元素的值，例如使用 .val()，不会触发事件。”。使用 customerAddress.val("Closest to Customer").change() 设置值并触发更改事件

【解决方案2】：

你试过了吗：

let select = document.getElementById("thePage:form:pBlock:address:addressTypeSelectionDropdown")
select.addEventListener("change", (event)=>{
    console.log(event)
    var s = document.createElement('script');
    s.setAttribute('type', 'text/javascript');
    s.content = "onchangeofPicklist()"
    select.appendChild(s);
})

您需要使用事件侦听器拦截更改事件，并且您应该能够从新的（扩展的）处理程序by injecting a script into the document 调用现有的更改事件处理程序（如有必要）。

JSFiddle

【讨论】：

是的，但正如我所说 onchangeOfPicklist() 不是我的代码的一部分，所以我收到一个错误：[ts] Property 'onchangeOfPicklist' does not exist on type 'Window'。跨度>
谢谢，但这似乎也不起作用，我在使用打字稿时做了一些修改：
select.addEventListener("change", (event)=>{ console.log(event); let s:any = document.createElement('script'); s.setAttribute('type', 'text/javascript'); s.content = "onchangeofPicklist()"; select.appendChild(s); }); customerAddress.change(); customerAddress.val("Closest to Customer");

【解决方案3】：

好的，这就是我所做的，类似于 Michael.Lumley 的回答：

let execFunct = function () {
    let script: HTMLScriptElement = document.createElement("script");
    script.textContent = "onchangeOfPicklist()";
    (document.head || document.documentElement).appendChild(script);
    script.parentNode.removeChild(script);
}

一旦我更改了下拉菜单，我就会执行 execFunct()。

【讨论】：