模拟人为点击并在下拉菜单上选择

Question

我试图通过带有javascript的chrome扩展名从国家/地区下拉菜单中选择一个选项。当我正常通过国家/地区下拉菜单选择一个选项时，状态下拉列表中的值会根据我的选择而更改。

我尝试用多种方法选择一个选项，其中大多数是：

$('#order_billing_country').val('CANADA').trigger("change")
$('#order_billing_country').val('CANADA').trigger('select')
$('#order_billing_country').val('CANADA').trigger('onselect')
Those past 3 but triggering select, onselect, and change
$('select').find('option[value=CANADA]').attr('selected','selected').end().trigger('onselect');

什么都没起作用...他们更改了国家/地区下拉列表中的值，但没有触发状态下拉列表中的更改。有没有办法通过javascript选择一个选项，就像我是人类一样？...

Answer 1

请注意，因为扩展具有自己的DOM，所以要访问页面DOM，建议您使用内容脚本和普通（纯）javascript进行选择并“手动”单击。

window.addEventListener("load", function load(event) {
    var optionToClick = document.querySelector('#order_billing_country').children[2]; //choose any of the children
    optionToClick.selected = true;
    simulateClick(optionToClick); // manual click simulation 
});

function simulateClick(item) {
  item.dispatchEvent(new PointerEvent('pointerdown', {bubbles: true}));
  item.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}));
  item.dispatchEvent(new PointerEvent('pointerup', {bubbles: true}));
  item.dispatchEvent(new MouseEvent('mouseup', {bubbles: true}));
  item.dispatchEvent(new MouseEvent('mouseout', {bubbles: true}));
  item.dispatchEvent(new MouseEvent('click', {bubbles: true}));
  item.dispatchEvent(new Event('change', {bubbles: true}));

  return true;
}

希望能帮助到你