CODEWITHSUNDEEP
javascripthtmlcss
user5527671
user5527671

Reputation:

How to click a dropdown menu and select option?

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

Upvotes: 0

Views: 6775

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65883

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>

Upvotes: 2

Robert Fridzema
Robert Fridzema

Reputation: 523

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

Upvotes: 0

Related Questions