javascript - 使用 javascript 选择下拉选项

Question

我对 javascript 的经验很少，我正在尝试使用 Chrome 控制台在下拉列表中选择一个项目。我找到了一种如何将索引设置为另一个值的方法，但它不会触发我手动单击它时会发生的操作。我寻找答案并尝试了 click()和 focus()功能，但似乎没有什么可以触发它。

document.getElementsByClassName("class-abc")[0].selectedIndex = 1

更新。 @jeprubio，您的答案有效。奇怪的是，即使我像下面的代码一样跳过添加事件监听器，它也能工作。

var x = document.getElementsByClassName("ui-pg-selbox")[0];
x.selectedIndex = 1;
x.dispatchEvent(new Event('change'));

<select class="class-abc" role="listbox">
    <option role="option" value="10" selected="selected">10</option>
    <option role="option" value="20">20</option>
    <option role="option" value="50">50</option>
</select>

Answer 1

您可以使用 dispatchEvent除了改变selectedIndex触发 onChange事件就像您手动完成一样:

var select = document.getElementsByClassName("class-abc")[0];

select.addEventListener('change',function(){
   console.log('selected: ' + this.value);
});

select.selectedIndex = 1
select.dispatchEvent(new Event('change'));

<select class="class-abc">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>