title: How do you remove all the options of a select box and then add one option and select it with jQuery?
body: <p>Using core jQuery, how do you remove all the options of a select box, then add one option and select it?</p>
  
  <p>My select box is the following.</p>
  
  <pre><code>&lt;Select id="mySelect" size="9"&gt; &lt;/Select&gt;
  </code></pre>
  
  <p>EDIT: The following code was helpful with chaining. However, (in Internet&nbsp;Explorer) <code>.val('whatever')</code> did not select the option that was added. (I did use the same 'value' in both <code>.append</code> and <code>.val</code>.)</p>
  
  <pre><code>$('#mySelect').find('option').remove().end()
  .append('&lt;option value="whatever"&gt;text&lt;/option&gt;').val('whatever');
  </code></pre>
  
  <p>EDIT: Trying to get it to mimic this code, I use the following code whenever the page/form is reset. This select box is populated by a set of radio buttons. <code>.focus()</code> was closer, but the option did not appear selected like it does with <code>.selected= "true"</code>. Nothing is wrong with my existing code - I am just trying to learn jQuery.</p>
  
  <pre><code>var mySelect = document.getElementById('mySelect');
  mySelect.options.length = 0;
  mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
  mySelect.options[0].selected="true";
  </code></pre>
  
  <p>EDIT: selected answer was close to what I needed. This worked for me:</p>
  
  <pre><code>$('#mySelect').children().remove().end()
  .append('&lt;option selected value="whatever"&gt;text&lt;/option&gt;') ;
  </code></pre>
  
  <p>But both answers led me to my final solution..</p>