title: Selecting a drop-down box option does not affect page
body: <p>I'm trying to make an extension that selects facilitates filling out info on checkout page of a <a href="https://www.supremenewyork.com/checkout" rel="nofollow noreferrer">website</a> (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 <code>option</code> 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</p>
  
  <p>Here's my code:</p>
  
  <pre><code>var checkoutSelects = document.querySelectorAll("select:not([type=hidden])");
  
  for(var i = 0; i &lt; checkoutSelects.length; i++) {
    if(checkoutSelects[i].getAttribute("id").toLowerCase().includes('country')) {
        var countryOptions = checkoutSelects[i].querySelectorAll('option');
  
        for(var a = 0; a &lt; countryOptions.length; a++) {
          if(countryOptions[a].value.toLowerCase().includes("canada")) {
              countryOptions[a].selected = true;
          }
      }
    }
  }
  </code></pre>