set option “selected” attribute from dynamic created option

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

Good question. You will need to modify the HTML itself rather than rely on DOM properties.

var opt = $("option[val=ID]"),
    html = $("<div>").append(opt.clone()).html();
html = html.replace(/>/, ' selected="selected">');
opt.replaceWith(html);

The code grabs the option element for Indonesia, clones it and puts it into a new div (not in the document) to retrieve the full HTML string: <option value="ID">Indonesia</option>.

It then does a string replace to add the attribute selected="selected" as a string, before replacing the original option with this new one.

I tested it on IE7. See it with the reset button working properly here: http://jsfiddle.net/XmW49/