Selecting a drop-down box option does not affect page

Question

I'm trying to make an extension that selects facilitates filling out info on checkout page of a website (you'll probably have to add to cart before you can go to the checkout page). Currently I'm just setting the "selected" value of a certain option tag to be true, but it seems not to affect the page as intended. I'm talking about the Country and State selection on the checkout page (I want it to be Canada and BC). Would prefer vanilla Javascript

Here's my code:

var checkoutSelects = document.querySelectorAll("select:not([type=hidden])");

for(var i = 0; i < checkoutSelects.length; i++) {
  if(checkoutSelects[i].getAttribute("id").toLowerCase().includes('country')) {
      var countryOptions = checkoutSelects[i].querySelectorAll('option');

      for(var a = 0; a < countryOptions.length; a++) {
        if(countryOptions[a].value.toLowerCase().includes("canada")) {
            countryOptions[a].selected = true;
        }
    }
  }
}

Answer 1

Can you try countryOptions.selectedIndex = a; instead of countryOptions[a].selected = true;