title: Setting selected atrribute onClick with Javascript
body: <p>My javascript skills are not the best, but I've been working on them lately and one thing I wanted to do was set attributes for html option tags. I posted the project on jfiddle to make it a little easier to see. You can see that <a href="http://jsfiddle.net/davidThomas/YZ42J/2/" rel="nofollow">here</a>. I think I'm just one line of code off or something. </p>
  
  <p>How would I remove the selected attribute from option 2 and create the selected attribute for option 1? In other words so that when I open 'another-popup', option 1 is selected instead of option 2.</p>
  
  <p>I recommend you check out the jsFiddle link, but I posted the code on this question as well.
  The javascript for the update link:</p>
  
  <pre><code>function updateSelected(id, removeID, parentID) {
      document.getElementById(parentID).style.display = 'none';
      document.getElementById(id).setAttribute("selected","selected");
      document.getElementById(removeID).removeAttribute("selected")
  }
  </code></pre>
  
  <p>The html:</p>
  
  <pre><code>&lt;a href="#box" rel="popup"&gt;Popup&lt;/a&gt;
  
  &lt;div id="box" class="popup"&gt;
  &lt;a href="#another-box" rel="popup" onClick="updateSelected("1", "2", "box");"&gt;Another box&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="another-box" class="popup"&gt;
  &lt;form&gt;
      &lt;select&gt;
          &lt;option id="1"&gt;option 1&lt;/option&gt;
          &lt;option id="2" selected&gt;option 2&lt;/option&gt;
      &lt;/select&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks for the help</p>