Stop removing selected value when selecting options using select2

Question

I have a combo box that can be selected multiple times. Here is the HTML.

<select multiple>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

JS Code

$('select').select2();
$('select').change(function(){
    $("select").val([]); // clear selected value
});

I want to be able to select more than once on the same option. For example, if I select 1, then I should be able to select 1 again. But, when I select an option in select2, the selected value is removed from the list. I have tried to empty the selected value right after I select a value, but selected value still get removed.

For example, I select an option with value 1. This makes an option with value 1 remove from the list, leaving only 2,3,4,5 in the list. When I select an option with value 2, this option is removed and an option with value 1 is back. This makes the option list become 1,3,4,5.

I want all of the options show up when the option is selected. But, I can't get around this. I have tried every solution possible, but none of it works.

Answer 1

There are several open issues on Select2 repo (see: #1002, #1674, #2672) but this feature has never been implemented.

A workaround is to re-append the option selected:

$(document).ready(function() {
  var configParamsObj = {
    templateResult: formatResultData,
  };
  $("#sel").select2(configParamsObj);
});

$("#sel").on("select2:select", function(e) {
  $("#sel").append('<option value="' + e.params.data.text + '">' + e.params.data.text + '</option>');
});

$("#sel").on("select2:unselect", function(e) {
  e.params.data.element.remove();
});

function formatResultData(data) {
  if (!data.id) return data.text;
  if (data.element.selected) return
  return data.text;
};

select {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css"> 

Multiple select w/duplicates
<div>
  <select id="sel" multiple>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

P.S.: offside effect is that options are appended at the end of dropdown.

Answer 2

I suppose that the val([]) contains all the possible selections from 1 to 5. So according to this you should try to include your $("select").val([]) into a for loop. For example:

$('select').select2();
$('select').change(function(){
  for(int i=0;i<5;i++)
  {
   $("select").val([i]);
  }
});

EDIT:

I have found a solution on your problem but I don't know if it works for you without knowledge on your project.

Here is a select tag that when you click on an option or more options, then the clicked one/ones is/are removed from the select tag list:

HTML:

<select id="mySelect" size="4">
  <option onclick="myFunction()">1</option>
  <option onclick="myFunction()">2</option>
  <option onclick="myFunction()">3</option>
  <option onclick="myFunction()">4</option>
  <option onclick="myFunction()">5</option>
</select>

JS:

<script>
    function myFunction() {
      var x = document.getElementById("mySelect");
      x.remove(x.selectedIndex);
    }
</script>

Hope that works for you.