javascript - 模拟人类点击并在下拉菜单中选择

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，我建议您使用内容脚本和 Vanilla (纯)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;
}

希望对你有帮助