Clear multiple select jquery-select2

Question

I am trying to create a reset button for jquery-select2 multiple select. I have no idea why my solution doesn't work.

Html:

<select id="workload-selector" class="js-source-states-2" multiple="multiple" style="width: 100%">             
  <option value="haha">haha</option>
  <option value="haha2">haha2</option>
  <option value="haha3">haha3</option>
</select>

<button id="reset">
Reset
</button>

Javascript:

$("#workload-selector").select2();
$("#reset").click(function(){
  $("#workload-selector option:selected").removeAttr("selected");
});

I made it on jsFiddle: https://jsfiddle.net/DTcHh/41975/

Incise

possible duplicate #15205762 – Herakleion

Answer 1

You can just do:

$("#workload-selector").select2('val', '');

Also according to the docs this also works:

$("#workload-selector").val("");
$("#workload-selector").trigger("change");

Plunk

Does not work for multiple select. It makes one empty tag. – Lanchow

Answer 2

The select2 multiple saves value in an array All you need to do is

$("#workload-selector").val([]).change();

Roa

This is the only answer that actually works for multi select. – Quillen

Answer 3

I have done just that, there it goes a sample of my elaboration

$("#reset").click(function(){
  $("#workload-selector").val(null).trigger('change');
});

Manicurist

here docs about clearing select2 values, it doesnt matter if multiple or single ... select2.org/programmatic-control/… – Manicurist

Nice answers dude, I'm thanks full for you. :) – Atonal

Answer 4

In the documentation https://select2.org/programmatic-control/add-select-clear-items#clearing-selections saying that I need set null value. When select have multiple choices, it gave me a blank selected option. But if set not exist value, it clear normally for me.

For example: if in options u have:

<select id="mySelect2" multiple="multiple">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

This normally clear select.

$('#mySelect2').val(-100).trigger('change');

Analyst

Answer 5

This works for but single and multi and is according to docs https://select2.org/programmatic-control/add-select-clear-items#clearing-selections

$('#mySelect2').val(null).trigger('change');

Pistoia