How to unselect options in select using jquery
Set the selected property to false: $(selector).prop('selected', false).
I have added a button and attached a click event to be able to demonstrate.
var countries = [];
function unselect() {
$.each($(".car option:selected"), function () {
countries.push($(this).val());
$(this).prop('selected', false); // <-- HERE
});
}
$("#unselect").click(unselect);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="car" multiple size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="button" value="unselect" id="unselect" />You can use $('.car').val([]); for unselect all options in multi-select dropdown.
For multi select value you can pass empty array for unselect all options.
$(document).ready(function(){
$("#select").click(function(){
var values= [];
$(".car > option").each(function(){
values.push($(this).attr('value'));
});
$('.car').val(values);
});
$("#unselect").click(function(){
$('.car').val([]);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select class="car" multiple size="3">
<option value="volvo" selected>Volvo</option>
<option value="saab" selected>Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<button id="select">Select All</button>
<button id="unselect">Unselect All</button>
</button>