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");