Simulate a human click and select on dropdown menu

Question

Im trying to select an option from a country dropdown menu through a chrome extension with javascript. When i select an option through the country dropdown menu normally, the values in the state dropdown change according to my selection.

I have tried selecting an option with many different methods, here are most of them:

$('#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');

Nothing has worked... They change the value in the country dropdown but it doesnt trigger the changes in the state dropdown. Is there a way to select an option as if i was human, through javascript?...

I would expect the change trigger to work. Do you have a reference to the binding that performs the state dropdown modification to verify what elements and event it is binding on? — Taplar, Apr 17 '18 at 20:18
@Taplar no i dont... There is a script on their page that seems to do things whenever i select a country manually, but not when i select it using jquery. There are some .on('change') triggers in it binded to the country select element, but it doesnt get triggered by the jquery in my extension. The script is customized Modernizr 2.6.2... I dont know if that helps — Gunnar Marino, Apr 17 '18 at 20:40
Can you link the page if you it is public? This will give us a better idea about what is going on. Your attempts should have worked. — Sam Battat, Apr 17 '18 at 20:49
@SamBattat supremenewyork.com/checkout. You have to add an item to your cart and to the checkout page. — Gunnar Marino, Apr 17 '18 at 21:02
Where is your script is running from? I was able to change the value from console. — Sam Battat, Apr 17 '18 at 21:06
Its in a chrome extension, When you changed the value from console, did it update the state options too? — Gunnar Marino, Apr 17 '18 at 21:11
@SamBattat Just tried doing it from the console... got the same result as i do from the chrome extenion :/ — Gunnar Marino, Apr 17 '18 at 21:44
Yes, I just executed this from console `$("#order_billing_country").val("CANADA").trigger("change");` — Sam Battat, Apr 17 '18 at 22:33
@SamBattat I executed that in console and it actually did work... copy pasted that exact code into a chrome extension and it didnt work. Should i be using a certain version of jquery? — Gunnar Marino, Apr 18 '18 at 16:59
Yea, it worked for me too. I just read the answer to this question: https://stackoverflow.com/questions/28398550/jquery-code-on-chrome-extension-doesnt-work?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa. Which solves my problem... kinda — Gunnar Marino, Apr 18 '18 at 17:37
In this case, you need to inject your code in the page instead. https://stackoverflow.com/questions/9515704/insert-code-into-the-page-context-using-a-content-script/9517879#9517879 — Sam Battat, Apr 18 '18 at 18:29

score 14 · Accepted Answer · answered Apr 19 '18 at 21:40

Be careful because extensions have their own DOM, to access the page DOM I suggest you use a Content Script and a vanilla (pure) javascript to select and "manually" click.

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

Hope it helps

Simulate a human click and select on dropdown menu

1 Answers1