html - Selecting correct option with Javascript in Internet Explorer - Stack Overflow

I have a problem with Internet Explorer not correctly selecting an option when a javascript event is triggered.

I track the events of a marker on a google map. When the marker is moved, I want the right country to be chosen from a select list.

Part of the code that switches the country selection:

<script type="text/javascript">
//...
document.getElementById("id_country").value = country;
//...
</script>

It works just fine in Google Chrome. I know that the country name that is being returned by the map matches the ones in the option field values. In Internet Explorer, nothing happens.

<select id="id_country" name="country">
    <option value="Afghanistan">Afghanistan</option>
    <option value="Aland Islands">Aland Islands</option>
    <!--...-->
</select>

How do I get Internet Explorer to select the correct option (without using jquery)?

I have a problem with Internet Explorer not correctly selecting an option when a javascript event is triggered.

I track the events of a marker on a google map. When the marker is moved, I want the right country to be chosen from a select list.

Part of the code that switches the country selection:

<script type="text/javascript">
//...
document.getElementById("id_country").value = country;
//...
</script>

It works just fine in Google Chrome. I know that the country name that is being returned by the map matches the ones in the option field values. In Internet Explorer, nothing happens.

<select id="id_country" name="country">
    <option value="Afghanistan">Afghanistan</option>
    <option value="Aland Islands">Aland Islands</option>
    <!--...-->
</select>

How do I get Internet Explorer to select the correct option (without using jquery)?

• javascript
• html

Share Improve this question Follow edited Apr 8, 2011 at 8:53 mplungjan 179k2828 gold badges182182 silver badges240240 bronze badges asked Apr 8, 2011 at 8:33 reggiereggie 3,6751414 gold badges6464 silver badges102102 bronze badges 6

• 2 On an entirely unrelated note, country dropdowns like that always make me chuckle. How many customers are you expecting from the Åland islands and Afghanistan? :) – Pekka Commented Apr 8, 2011 at 8:35
• version of IE might be helpful – Sapph Commented Apr 8, 2011 at 8:36
• jsfiddle/fSVGD/2 this is working for me using IE7 and IE8 browser modes in IE9 (unfortunately I don't have actual copies of the older browsers installed). – Sapph Commented Apr 8, 2011 at 8:43
• What you are doing seems pletely correct. OLDER browser might want you to loop over the options and set the matching option's selected to the boolean true – mplungjan Commented Apr 8, 2011 at 8:51
• Sapph and mplungjan, you are right. It does indeed work just fine in Internet Explorer. The problem was entirely different: in Internet Explorer, I have a different language setting. Google Maps returns the country name in a locale-specific language with their geocoding api. I will have to set the right language when I make the API request. – reggie Commented Apr 8, 2011 at 9:01

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

selectedIndex property would work but as Afshin said You need to iterate options first.

var elCountry = document.getElementById("id_country");
var options = elCountry.options;
for (var i = 0; i < options.length; i++) {
    if (options[i].value == country) {
        elCountry.selectedIndex = i;
    }
}

You need to iterate through the options collection of document.getElementById('id_country') and set the matching option's "selected" attribute to the string "selected"

Here's a code sample demonstrating @afshin's answer (thank you!):

function setCountryOption(country) {
  const selectEl = document.getElementById('id_country');
  const options = selectEl.options;

  for (let i = 0, len = options.length; i < len; i++) {
    if (options[i].value == country) {
      options[i].setAttribute('selected', 'selected');
    }
  }
}