如何使用JavaScript代码在网站上选择下拉菜单元素？

Question

我正在编写一个JavaScript程序，该程序需要能够在下拉菜单中选择一个元素，然后继续浏览。我的问题是，即使我可以选择一个下拉菜单元素并且可以在网站上看到该下拉菜单更改，但我选择的元素似乎没有被“注册”，并且当我继续浏览时，该下拉菜单又回到了默认选项。

[我发现网站可能需要单击鼠标来注册更改，所以我选择了正确的选项后尝试单击dorpdown，但是仍然无法使用。

这里是我尝试过的不同代码，似乎都存在相同的问题：

//first try:
document.getElementById('SingleOptionSelector-0').selectedIndex = 2;
//second try :
document.getElementById('SingleOptionSelector-0').value = '3';

我试图这样单击下拉菜单：

document.getElementById('SingleOptionSelector-0').click();

但是它不会扩展。就像点击没有注册，这对我来说似乎很奇怪，因为当我单击网页上的其他位置时，它就可以正常工作

我已经看到了很多有关如何与下拉菜单进行交互的问题，但是似乎没有其他人遇到的问题是，当您更改值时，它没有被网页注册

相关的HTML如下：

<select class="single-option-selector single-option-selector-product-template_original product-form__input" id="SingleOptionSelector-0" data-index="option1">
        <option value="1">Hamburger</option>
        <option value=" 2">fries</option>
        <option value="3">Coke</option>
        <option value="4">Diet Coke</option>
    </select>

编辑：看来我还不够清楚。我的问题的一个例子是网站https://www.xhibition.co/collections/air-jordan/products/jordan-23-engineered-full-zip-jacket?variant=29510378848328。当我使用这些方法之一更改“大小”下拉列表时，我可以看到它发生了变化，但是当转到篮子时，我刚刚添加的元素的大小是默认值（“ M”）。这就是网站“未注册”下拉更改的意思。

Answer 1

尝试一下。

document.getElementById('myDropDown').value = "2"

Answer 2

您的问题有点含糊，但是我认为下面的示例应该使您对如何获取和设置select元素值以及如何使用addEventListener知道何时发生change事件有个好主意。地点：

const selectEl0 = document.querySelector('#SingleOptionSelector-0');
const selectEl1 = document.querySelector('#SingleOptionSelector-1');
const onChange = e => selectEl1.value = e.target.value;
selectEl0.addEventListener('change', onChange)

The second select element will update it's value when the first one changes:<br/>
<select class="single-option-selector single-option-selector-product-template_original product-form__input" id="SingleOptionSelector-0" data-index="option1">
  <option value="1">Hamburger</option>
  <option value="2">fries</option>
  <option value="3">Coke</option>
  <option value="4">Diet Coke</option>
</select>

<select class="single-option-selector single-option-selector-product-template_original product-form__input" id="SingleOptionSelector-1" data-index="option1">
  <option value="1">Hamburger</option>
  <option value="2">fries</option>
  <option value="3">Coke</option>
  <option value="4">Diet Coke</option>
</select>