How to all deselect all the chosen options with jQuery? - html

Question

I use this link (Select 2 with multiselct option) for my HTML pages.
How can I deselect all selected option by J Query?
I try this code $('#myIdSelectForm > option').removeAttr("selected"); and so many other J Query codes but not working.
$(function() {
$('#field2').select2();
});
$('#myIdSelectForm > option').removeAttr("selected");
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<select name="myIdSelectForm" id="field2" multiple="" multiselect-search="true" multiselect-select-all="true" multiselect-max-items="3" style="display: none;">
<option>Abarth</option>
<option>Alfa Romeo</option>
<option>Aston Martin</option>
<option>Audi</option>
<option>Bentley</option>
<option>BMW</option>
<option>Bugatti</option>
<option>Cadillac</option>
<option>Chevrolet</option>
<option>Chrysler</option>
<option>Citroën</option>
<option>Dacia</option>
<option>Daewoo</option>
<option>Suzuki</option>
<option>Tesla</option>
<option>Toyota</option>
<option>Volkswagen</option>
<option>Volvo</option>
<option>
</option>
</select>

Answer 1

You need to use a proper id selector #field2 not a name as an id.
Here I use a second button just to illustrate clearing all when we click that button by triggering a custom event and then clearing the value then triggering a change.
I also added a button to clear just one - the last selected option in this case.
$(function() {
$('#field2').select2();
$('#field2').on('clear-all', function(event) {
console.log('Doing:', event.type);
$(this).val(null).trigger('change');
}).on('clear-last', function(event) {
console.log('Doing:', event.type);
$(this).find('option:selected')
.last().prop("selected", false);
$(this).trigger("change");
});
$("#test-deselect").on("click", function() {
console.log('clearing');
$('#field2').trigger('clear-all');
});
$("#test-deselect-last-one").on("click", function() {
console.log('clearing last');
$('#field2').trigger('clear-last');
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<select name="myIdSelectForm" id="field2" multiple="" multiselect-search="true" multiselect-select-all="true" multiselect-max-items="3">
<option selected>Abarth</option>
<option>Alfa Romeo</option>
<option selected>Aston Martin</option>
<option>Audi</option>
<option>Bentley</option>
<option>BMW</option>
<option>Bugatti</option>
<option>Cadillac</option>
<option>Chevrolet</option>
<option>Chrysler</option>
<option>Citroën</option>
<option>Dacia</option>
<option>Daewoo</option>
<option>Suzuki</option>
<option>Tesla</option>
<option>Toyota</option>
<option>Volkswagen</option>
<option>Volvo</option>
<option></option>
</select>
<button id="test-deselect" type="button">Deselect all</button>
<button id="test-deselect-last-one" type="button">Deselect last one</button>