CODEWITHSUNDEEP
jqueryselect
peace_love
peace_love

Reputation: 6471

How can I prevent automatic selection order of select2?

When I select from my multiple select box I need that the order of the selected items should stay in the way that I select the options.

This means, right now, when I select February, March, January then the order of the selected items in my box is January, February, March. But I would need to keep the order that I selected. In this case February, March, January.

$('select').select2({
    placeholder: 'Select a month'
});
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.full.js"></script>


<select multiple="multiple" style="width: 300px">
    <option value="JAN">January</option>
    <option value="FEB">February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
</select>

Upvotes: 1

Views: 281

Answers (1)

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

Select2 does not support that directly. But you can still make a way around to achieve this. You need to reorder the <option> so that you get the selected option in sequence as you select. And, re-order them again when they are removed from selection.

$('select').select2({
    placeholder: 'Select a month'
});

$("select").on("select2:select", function (evt) {
  var element = evt.params.data.element;
  var $element = $(element);
  
  window.setTimeout(function () {  
  if ($("select").find(":selected").length > 1) {
    var $second = $("select").find(":selected").eq(-2);
    
    $element.detach();
    $second.after($element);
  } else {
    $element.detach();
    $("select").prepend($element);
  }
  
  $("select").trigger("change");
  }, 1);
});

$("select").on("select2:unselect", function (evt) {
  if ($("select").find(":selected").length) {
    var element = evt.params.data.element;
    var $element = $(element);
   $
   ("select").find(":selected").after($element); 
  }
});
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.full.js"></script>


<select multiple="multiple" style="width: 300px">
    <option value="JAN">January</option>
    <option value="FEB">February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
</select>

You can also refer to this issue to get more detail on this. For the use of multiple selectboxes check this Link

Upvotes: 1

Related Questions