Click dropdown option with javascript and have chained dropdown boxes change

Question

So there are 2 dropdown boxes in a page, Country, and state / province. when a certain option is picked in the country dropdown box, it changes the values in the state dropdown box.

Here is the country dropdown:

<select class="select optional" name="order[billing_country]" id="order_billing_country" aria-invalid="false">
    <option selected="selected" value="USA">USA</option>
    <option value="CANADA">CANADA</option>
</select>

Here is the state dropdown with USA selected:

<select class="select optional" name="order[billing_state]" id="order_billing_state">
    <option value=""></option>
    <option value="IL">IL</option>
    <option value="NY">NY</option>
</select>

Here is the state dropdown with CANADA selected:

<select class="select optional" name="order[billing_state]" id="order_billing_state">
    <option value=""></option>
    <option value="SK">SK</option>
    <option value="YT">YT</option>
</select>

When i select an option in the country dropdown normally, it works and changes the values in the state dropdown, but when i use javascript to select a country dropdown option, it doesnt change the values in the state dropdown. Here is some of the code i have tried:

document.getElementById('order_billing_country').value = "CANADA"

and

document.getElementById("order_billing_country").selectedIndex = 1

Neither of those cause the state dropdown to update. So i was wondering if it was possible to click an option in the country dropdown like a normal human would, or if there was another way to select an option in the country dropdown that would cause the states to be updated.

This was marked as duplicate to Chained Select Boxes (Country, State, City) in a different thread. I am asking a different question though, im not trying to make the state dropdown change based on country, it already does that (when i select a dropdown option as a human). Im trying to select a country dropdown option with javascript and still have the state dropdown values change as if i was selecting a country as a human.

EDIT:: Found two scripts in the page that have something to do with it: here they are:

<script id="states-USA" type="text/x-tmpl">
<option value=""></option>
<option value="IL">IL</option>
<option value="NY">NY</option>
</script>

and

<script id="states-CANADA" type="text/x-tmpl">
<option value=""></option>
<option value="SK">SK</option>
<option value="YT">YT</option>
</script>

If i change values in those scripts, it changes what appears in the state dropdown after selecting the country. I couldnt find anything that calls those scripts in the page. Is it possible to call those scripts from the chrome extension or something like that?...