title: jQuery add blank option to top of list and make selected to existing dropdown
body: <p>So I have a dropdown list</p>
  
  <pre><code>&lt;select id="theSelectId"&gt;
    &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
    &lt;option value="saab"&gt;Saab&lt;/option&gt;
    &lt;option value="mercedes"&gt;Mercedes&lt;/option&gt;
    &lt;option value="audi"&gt;Audi&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>This is what I would like</p>
  
  <pre><code>&lt;select id="theSelectId"&gt;
    &lt;option value="" selected="selected"&gt;&lt;/option&gt;
    &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
    &lt;option value="saab"&gt;Saab&lt;/option&gt;
    &lt;option value="mercedes"&gt;Mercedes&lt;/option&gt;
    &lt;option value="audi"&gt;Audi&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Trying to add a blank option before and set it to this, want to enforce the user to select a value from the original list but would like it to be blank when they see the option they have to choose.</p>
  
  <p>Trying this but not working</p>
  
  <pre><code>// Add blank option
  var blankOption = {optVal : ''};
  $.each(blankOption, function(optVal, text) {
     $('&lt;option&gt;&lt;/option&gt;').val(optVal).html(text).preprendTo('#theSelectId');
  });
  </code></pre>
  
  <p>and I have tried this but is clears out the other values</p>
  
  <pre><code>$('#theSelectId option').prependTo('&lt;option value=""&gt;&lt;/option&gt;');
  </code></pre>