从下拉菜单中选择带有脚本的选项时，Ajax调用不会触发

Question

尝试做一个chrome扩展来自动化我的工作中的一些日常琐事。所以这个站点有一个标准的下拉输入，如下所示。

<select id="branchList">
    <option value="3">KATHMANDU</option>
    <option value="18">DELHI</option>
    <option value="24">BEIJING</option>
</select>

当我手动单击其中一个选项时，它会触发一个ajax调用，并用新数据加载页面的部分。但如果我以编程方式尝试选择该选项，它不会触发ajax调用。下面是我用来选择一个选项的代码，它选择了该选项，但没有像预期的那样触发ajax调用。

document.querySelector("#branchList").value = "18"

document.querySelector("#branchList").options[1]

编辑-按照注释中的建议使用dispatchevent。

var elem = document.querySelector("#branchList").options[1]
let event = new Event("click");
elem.dispatchEvent(event);

Answer 1

您需要触发更改事件。

var select = document.getElementById('branchList')


select.addEventListener('change', () => {
  console.log('change')
  //here should be the ajax call
})

function changeSelectValue(num){
 
  select.value = num
  select.dispatchEvent(new Event('change'));
}

changeSelectValue(18)

<select id="branchList">
    <option value="3">KATHMANDU</option>
    <option value="18">DELHI</option>
    <option value="24">BEIJING</option>
</select>