如何单击下拉菜单并选择选项？

Question

I have the following code

<select class="needsclick" id="country" name="order[country]">
              <option value="USA" selected="selected">USA</option>
              <option value="CANADA">CANADA</option>
            </select>

I could do the following javascript command to change the option value

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

however, this does not change the selected value and does not change the state box to province.

When I physically click this dropdown menu and change to CANADA, the effects of the change take place (the state box changes to province)

I am using Swift iOS to parse HTML and wondering what line of javascript code is needed to click a option value rather than changing the option value?

If I do the following after changing the value

document.getElementById("country").click()

it just clicks the menu but still does not change the state box to province (happens when physically clicking the option value)

How can I achieve this using a javascript command like the two above?

The state/province box is irrelevant to the code just relevant to the fact it changes when the dropdown is physically clicked and not when programmatically changed.

I can do the following code but it still does not change the state box to province (only if physically clicked)

document.getElementById("country")[1].selected = true

Answer 1

To work with the option elements within a select , you must access the options node list and then select one to work with.

Setting the value is separate from setting the selected flag.

 var countries = document.getElementById("country"); var states = document.getElementById("provincesUSA"); var territories = document.getElementById("provincesCanada"); countries.addEventListener("change", function(e) { update(e); }); function update(e){ // show the correct sub-list based on the selected option var country = countries[countries.selectedIndex]; if(country.value === "USA"){ states.classList.remove("hidden"); territories.classList.add("hidden"); } else if(country.value === "CANADA") { territories.classList.remove("hidden"); states.classList.add("hidden"); } else { territories.classList.add("hidden"); states.classList.add("hidden"); } } // To dynamically choose document.querySelector("button").addEventListener("click", function(){ countries.options[2].selected = "selected"; // Canada // Simulate the change event update(countries); }); 

 #provincesUSA.hidden, #provincesCanada.hidden { display:none; } 

 <select class="needsclick" id="country" name="order[country]"> <option value="" selected="selected">Choose A Country</option> <option value="USA">USA</option> <option value="CANADA">CANADA</option> </select> <select id="provincesUSA" class="hidden" name="states"> <option value="al">Alabama</option> <option value="ar">Arkansas</option> </select> <select id="provincesCanada" class="hidden" name="territories"> <option value="on">Ontario</option> <option value="qu">Quebec</option> </select> <button>Force A Selection (click me whe CANADA is NOT selected)</button> 

Answer 2

document.getElementById("country").selectedIndex = 2;