javascript - set option "selected" attribute from dynamic created option

Question

I have a dynamically created select option using a javascript function. the select object is

<select name="country" id="country">
</select>

when the js function is executed, the "country" object is

<select name="country" id="country">
    <option value="AF">Afghanistan</option>
    <option value="AL">Albania</option>
    ...
    <option value="ID">Indonesia</option>
    ...
    <option value="ZW">Zimbabwe</option>
</select>

and displaying "Indonesia" as default selected option. note : there is no selected="selected" attribute in that option.

then I need to set selected="selected" attribute to "Indonesia", and I use this

var country = document.getElementById("country");
country.options[country.options.selectedIndex].setAttribute("selected", "selected");

using firebug, I can see the "Indonesia" option is like this

<option value="ID" selected="selected">Indonesia</option>

but it fails in IE (tested in IE 8).

and then I have tried using jQuery

$( function() {
    $("#country option:selected").attr("selected", "selected");
});

it fails both in FFX and IE.

I need the "Indonesia" option to have selected="selected" attribute so when I click reset button, it will select "Indonesia" again.

changing the js function to dynamically create "country" options is not an option. the solution must work both in FFX and IE.

thank you

Answer 1

You're overthinking it:

var country = document.getElementById("country");
country.options[country.options.selectedIndex].selected = true;