title: How to remove a selected attribute from option A and then re-apply to option B on change?
body: <p><strong>Desired Behaviour</strong></p>
  
  <p>Remove existing <code>selected</code> attribute from Option A (if it exists) and apply <code>selected</code> attribute to Option B.  </p>
  
  <p><strong>Current Behaviour</strong></p>
  
  <p>Current attempt works on first change, but on subsequent changes continues adding the selected attribute to the selected options so that there is more than one option with a selected attribute.  </p>
  
  <p><strong>Constraints</strong></p>
  
  <p>HTML structure and selector defined below, ie <code>.my_div</code>, are required.  </p>
  
  <p><strong>jsFiddle</strong></p>
  
  <p><a href="http://jsfiddle.net/rwone/e7teL39u/" rel="nofollow">http://jsfiddle.net/rwone/e7teL39u/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="my_div"&gt;
  &lt;select&gt;
      &lt;option value="none"&gt;none&lt;/option&gt;
      &lt;option value="val1"&gt;val1&lt;/option&gt;
      &lt;option value="val2"&gt;val2&lt;/option&gt;
      &lt;option value="val3"&gt;val3&lt;/option&gt;
      &lt;option value="val4"&gt;val4&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(document).on("change",".my_div", function() {
  // remove old selected attribute - this doesn't enable solution
  // $(this).find('option:selected').removeAttr('selected');
  
  // apply selected attribute to new selection
  var new_selection = $(this).find('option:selected');
  new_selection.attr("selected",true); 
  });
  </code></pre>