title: set option "selected" attribute from dynamic created option
body: <p>I have a dynamically created select option using a javascript function. the select object is</p>
  
  <pre><code>&lt;select name="country" id="country"&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>when the js function is executed, the "country" object is</p>
  
  <pre><code>&lt;select name="country" id="country"&gt;
      &lt;option value="AF"&gt;Afghanistan&lt;/option&gt;
      &lt;option value="AL"&gt;Albania&lt;/option&gt;
      ...
      &lt;option value="ID"&gt;Indonesia&lt;/option&gt;
      ...
      &lt;option value="ZW"&gt;Zimbabwe&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>and displaying "Indonesia" as default selected option. note : there is no <code>selected="selected"</code> attribute in that option.</p>
  
  <p>then I need to set <code>selected="selected"</code> attribute to "Indonesia", and I use this </p>
  
  <pre><code>var country = document.getElementById("country");
  country.options[country.options.selectedIndex].setAttribute("selected", "selected");
  </code></pre>
  
  <p>using firebug, I can see the "Indonesia" option is like this</p>
  
  <pre><code>&lt;option value="ID" selected="selected"&gt;Indonesia&lt;/option&gt;
  </code></pre>
  
  <p>but it fails in IE (tested in IE 8).</p>
  
  <p>and then I have tried using jQuery </p>
  
  <pre><code>$( function() {
      $("#country option:selected").attr("selected", "selected");
  });
  </code></pre>
  
  <p>it fails both in FFX and IE.</p>
  
  <p>I need the "Indonesia" option to have <code>selected="selected"</code> attribute so when I click reset button, it will select "Indonesia" again.</p>
  
  <p>changing the js function to dynamically create "country" options is not an option. the solution must work both in FFX and IE.</p>
  
  <p>thank you</p>