使用 javascript 在网页的下拉列表中单击一个选项

Question

我在这里有一个亚马逊网站 URL： https://www.amazon.com/dp/B07DKCQSQ5

我正在尝试编写一些 javascript 代码，以便我可以在尺寸下拉列表中选择一个尺寸选项

我正在尝试通过打开页面上的 devtools 控制台并在控制台中运行一些 javascript 代码来选择大小选项。

这段代码：document.querySelector('#native_dropdown_selected_size_name') 抓取正确的下拉菜单，我可以查看所有嵌套的选项元素。

我试图获取所有嵌套的选项元素并使用以下代码单击：

document.querySelector('#native_dropdown_selected_size_name').querySelectorAll('option')[3].click() 但它只是返回 undefined 并且没有被选中？

我正在尝试用纯 javascript（没有 jquery）编写代码

Answer 1

如果你需要触发改变页面内容的事件，那么你必须像这样模拟点击事件：

let dropdown = document.getElementById("native_dropdown_selected_size_name");
let dropdown_element = document.getElementById("native_dropdown_selected_size_name_1");
// change the id "native_dropdown_selected_size_name_1" using the number of the item you want to be selected

let evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
dropdown.dispatchEvent(evt);
dropdown_element.dispatchEvent(evt);