Using core jQuery, how do you remove all the options of a select box, then add one option and select it?
My select box is the following.
<Select id="mySelect" size="9"> </Select>
EDIT: The following code was helpful with chaining. However, (in Internet Explorer)
.val('whatever') did not select the option that was added. (I did use the same 'value' in both
$('#mySelect').find('option').remove().end() .append('<option value="whatever">text</option>').val('whatever');
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.
.focus() was closer, but the option did not appear selected like it does with
.selected= "true". Nothing is wrong with my existing code – I am just trying to learn jQuery.
var mySelect = document.getElementById('mySelect'); mySelect.options.length = 0; mySelect.options = new Option ("Foo (only choice)", "Foo"); mySelect.options.selected="true";
EDIT: selected answer was close to what I needed. This worked for me:
$('#mySelect').children().remove().end() .append('<option selected value="whatever">text</option>') ;
But both answers led me to my final solution..