title: Browsers don't set selected attribute on an options tag
body: <p>I have a form which can be dynamically increased by using native javascript.</p>
  
  <pre><code>function plus(){
    var myHTML = '\
    &lt;select id="one"  name="one"&gt; \
      &lt;option value="001"&gt;one&lt;/option&gt; \
      &lt;option value="002"&gt;two&lt;/option&gt; \
      &lt;option value="003"&gt;three&lt;/option&gt; \
      &lt;option value="004"&gt;four&lt;/option&gt; \
    &lt;/select&gt;';
  
    document.getElementById("divpos").innerHTML = document.getElementById("divpos").innerHTML + myHTML;
  }
  </code></pre>
  
  <p>This works fine, but if I pick one of those options and add another select, the previously added selects reset to their default values (or the first option available). Example given:</p>
  
  <ul>
  <li>Add Select #1</li>
  <li>Select #1: two</li>
  <li>Add Select #2</li>
  <li>Select #1: one</li>
  <li>Select #2: one</li>
  </ul>
  
  <p>and it should be like</p>
  
  <ul>
  <li>Add Select #1</li>
  <li>Select #1: two</li>
  <li>Add Select #2</li>
  <li>Select #1: two</li>
  <li>Select #2: one</li>
  </ul>
  
  <p>I think that just left-clicking something doesn't explicitly set the "selected" attribute. If this is set, this resetting of the previous values doesn't happen. I tried this using Google Chrome Developer Options, set any Value selected it worked as expected. Any ideas how I can fix this?</p>
  
  <hr>
  
  <p><strong>Note:</strong> I do really change the ID and name of each new select. I have a Perl-CGI Script which prints my HTML Page. So there are no duplicated IDs or names here.</p>