How to click a dropdown menu and select option?

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

Where is the state/province box in your markup? I only see the select element for the country. It's always helpful to post a real working example, albeit a somewhat reduced one: see [how to create an MCVE](https://stackoverflow.com/help/mcve). — Terry, May 12 '17 at 20:57
@Terry, 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. — , May 12 '17 at 20:59
@Shrooms Aren't you having an issue with how to change the select and trigger the change in the state/province box? seems like it's relevant to me. Also how the "state/province" box is updating based on the change of the `select` would be relevant, no? I'd like a working demo of what you're working with now. — Michael Coker, May 12 '17 at 21:37

Scott Marcus · Answer 1 · 2017-05-12T21:21:45.487

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>

this works however a physical click is still needed to change the state box to province. This works but nothing is updated after this. — , May 12 '17 at 21:04
@Shrooms I have updated the example with a button that shows how to change a selection via code. While this example triggers that code with a click - you can use the code wherever you need to and a click doesn't have to trigger it. — Scott Marcus, May 12 '17 at 21:16
could I do something like this; document.querySelector("needsclick").addEventListener("click", function(){ countries.options[2].selected = "selected"; // Canada }); — , May 12 '17 at 21:20
@Shrooms That's exactly what I am doing in the JavaScript at the bottom. — Scott Marcus, May 12 '17 at 21:22
if I try document.querySelector("needsclick").addEventListener("click", function() { document.getElementById("country").options[1].selected = "selected"; }); I get the error: VM21034:1 Uncaught TypeError: Cannot read property 'addEventListener' of null at :1:37 — , May 12 '17 at 22:07
That means that `document.querySelector("needsclick")` isn't finding the element. Make sure that this code is firing AFTER the document is fully parsed. Do that by putting it at the end of the `body`. — Scott Marcus, May 12 '17 at 22:11

score 0 · Answer 2 · answered May 12 '17 at 21:03

0

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

answered May 12 '17 at 21:03

Robert Fridzema

517
3
18

this works but it does not bring into affect the changing of the state field to province field. If i physically click the option it changes what I said. – May 12 '17 at 21:07
**From review queue**: May I request you to please add some more context around your answer. Code-only answers are difficult to understand. It will help the asker and future readers both if you can add more information in your post. – RBT May 13 '17 at 09:39

How to click a dropdown menu and select option?

2 Answers2

Linked