Deselecting all elements from a multi-select dropdown in jQuery

Question

I have a multi-select drop down as following, where I have selected the options "Test 2" and "Test 3".

<select id="edit-rec" class="form-select" multiple="multiple" name="rec[]"> <option value="6012">Test 1</option> <option value="8436">Test 2</option> <option value="4689">Test 3</option> <option value="6784">Test 4</option> </select> 

I have a button called "Deselect All". When this button is clicked, all selected items should be deselected. In this case, the items I previously selected, "Test 2" and "Test 3", should now become deselected.

How can I accomplish this using jQuery?

Answer 1

$("#edit-rec option:selected").removeAttr("selected"); 

Answer 2

Try -

$("#edit-rec > option").attr("selected",false); 

Demo - http://jsfiddle.net/LhSBu/