title: jQuery .val() not setting the value of <select>
body: <p>I would like to know why jQuery's <code>.val()</code>  function is not setting the value of the <code>&lt;select&gt;</code> control for me after I called replaceWith, but it is working otherwise.</p>
  
  <p>Please <a href="http://jsfiddle.net/qSYYc/" rel="noreferrer">see here for a (not) working example</a>.</p>
  
  <pre><code>&lt;select&gt;&lt;option&gt;ABC&lt;/option&gt;&lt;option&gt;DEF&lt;/option&gt;&lt;/select&gt;
  &lt;input type="button" onclick="ControlOff()" value="Turn Off Control" /&gt;
  &lt;input type="button" onclick="ControlOn()" value="Turn On Control" /&gt;
  &lt;input type="button" onclick="Test()" value="Value Setting Test" /&gt; 
  function ControlOff() {
      $('select').each(function () {
          $(this).replaceWith('&lt;span class="select-type"&gt;' + $(this).val() + '&lt;/span&gt;');
      });
  }
  
  function ControlOn() {
      $('.select-type').each(function () {
          var selected = $(this).text();
          $(this).replaceWith('&lt;select&gt;&lt;option&gt;ABC&lt;/option&gt;&lt;option&gt;DEF&lt;/option&gt;&lt;/select&gt;');
          $(this).val(selected);
      });
  }
  
  function Test() {
      $('select').val('DEF');
  }
  </code></pre>