30

When user selects many items (tags), they are automatically sorted alphabetically. How to prevent automatic sort and keep user's order using Select2 4.0?

Update:

The mentioned "possible dublicate question" is for the older version of Select2 v3... I ask about version 4... It differs form older ones and mentioned answers dosn't solve the problem.

0

3 Answers 3

66

I've found a solution that works with Select2 v4. It changes the order of items - item selected by user are moved to the end.

$("select").select2();

$("select").on("select2:select", function (evt) {
  var element = evt.params.data.element;
  var $element = $(element);
  
  $element.detach();
  $(this).append($element);
  $(this).trigger("change");
});
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select style="width: 500px;" multiple="multiple">
  <option>two</option>
  <option>four</option>
  <option>six</option>
</select>

Update

The solution was found here: github.com/select2/select2/issues/3106. Its author is kevin-brown.

9
  • 2
    You should credit where you found the solution: github.com/select2/select2/issues/3106
    – vol7ron
    Aug 25, 2016 at 20:42
  • @vol7ron Yes, you are right. I couldn't found where I had found the solution, but you've found it.
    – Ivan Z
    Aug 31, 2016 at 8:42
  • 1
    I'm not sure that's the original location, but it helps to credit the author and also follow up with them if there's a bug in the solution. As mentioned on GitHub this will reorder the options list, which may not be desired. There's a different workaround there that reorders the tags and preserves the options list order.
    – vol7ron
    Aug 31, 2016 at 11:47
  • 2
    This changes the order of the dropdown when closeOnSelect is set to false
    – Rodin10
    Mar 14, 2019 at 10:38
  • 3
    This is rearranging the dropdown list also.. I dont want the dropdown list to change. I want to remove the alphabetic order from the input box only. Is there a workaround for that ? Apr 16, 2020 at 15:12
2

This has been discussed before for Select2 3.5.2, you can use select2('data') to get the order.

$("select").select2();

$('#sayResult').click(function () {
  // 'data' brings the unordered list, while val does not
  var data = $('select').select2('data');
  
  // Push each item into an array
  var finalResult = data.map(function () {
    return this.id;
  });

  // Display the result with a comma
  alert( finalResult.join(',') );
});
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>

<select style="width: 500px;" multiple="multiple">
  <option>two</option>
  <option>four</option>
  <option>six</option>
</select>

<button id='sayResult'>Say Result</button>

2
  • 4
    That code is not working. It uses old version of Select2 v3.4.5
    – Ivan Z
    Jul 15, 2015 at 17:02
  • 5
    This does not work in Select2 4.0.0 because data now returns the selected items in the order that they appear. Jul 17, 2015 at 15:34
2

This solution works best

HTML

<select style="width: 500px;" multiple="multiple">
    <option>two</option>
    <option>four</option>
    <option>six</option>
  </select>

JS

$(document).ready( function () {

    $("select").select2({
      tags: true
    });
    
    $("select").on("select2:select", function (evt) {
      var element = evt.params.data.element;
      var $element = $(element);
      
      $element.detach();
      $(this).append($element);
      $(this).trigger("change");
    });

} );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.