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来选择和＆＃34;手动＆＃34;点击。

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;
}

希望有所帮助

模拟人工点击并在下拉菜单中选择

1 个答案: