以编程方式更改 html 选择元素不会触发事件

Question

在Yahoo weather website 上有一个选择元素，可以通过以下方式检索：

let sel = document.querySelector('select');

您可以手动选择不同的选项（温度、风和降水）并查看每个选项的下一个 24 小时预报。问题是，当您以编程方式更改选项时（如下所示），尽管所选选项发生更改，但不会触发 onChange 事件（即预测不更新）：

sel.selectedIndex = 1;

sel.selectedIndex = 2;

我已经测试了在类似线程上准备的不同解决方案（如this one 和this one），但不幸的是它们都不起作用。任何帮助都将提前表示感谢。

Answer 1

您需要使用以下代码：-

const sel = document.querySelector('select');
sel.value = 'precipitation'; // You can change this value to whatever you want
sel.dispatchEvent(new Event('change', {'view': window,'bubbles': true}));