Using core jQuery, how do you remove all the options of a select box, then add one option and select it?
<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" &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>
