为什么用 javascript 模拟选择选项不进行 API 调用？

Question

这是我正在处理的网站。

https://www.punters.com.au/form-guide/doomben_181834/tab-long-may-we-play-class-3-handicap_1047245/#SectionalTimes

我想选择Last 5 running选项而不是Last 10 running with javascript。

这就是我所做的。

document.getElementById("sectionalSpeedRunsFilter").selectedIndex = "1";

这样做在某种程度上有效，因为它选择了最后 5 次运行选项。

但我的问题是，在使用javascript选择Last 5时，它不会像手动选择鼠标那样进行API 调用。 所以数据，没有得到更新。

我该如何解决 ？ 任何帮助表示赞赏。 其他开发人员，请放轻松，我只是想解决我遇到的问题。

Answer 1

尝试在更新值后使用javascript手动触发更改事件。 而不是selectedIndex使用value

document.getElementById("sectionalSpeedRunsFilter").value = "1";
const e = new Event("change");
const element = document.querySelector('#sectionalSpeedRunsFilter')
element.dispatchEvent(e);

工作样本。

 function onCarSelect() { const selectedCar = document.getElementById('sectionalSpeedRunsFilter').value; console.log(`You have selected ${selectedCar}`); } function setManually() { document.getElementById("sectionalSpeedRunsFilter").value = "opel"; const e = new Event("change"); const element = document.querySelector('#sectionalSpeedRunsFilter') element.dispatchEvent(e); }

 <div> <label for="cars">Choose a car:</label> <select name="cars" id="sectionalSpeedRunsFilter" onchange="onCarSelect()"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> </div> <div> <button onclick="setManually()">Select Opel</button> </div>