I'm using select2() field using select2 library and Drag and Drop Sorting is enabled in the field.

It works well, but once i save it, the ordering break and they are ordered alphabetically.

I was wondering if its possible to anyhow save ordering of elements after drag drop in select2() fields.

Please suggest.

I'm using select2() field using select2 library and Drag and Drop Sorting is enabled in the field.

It works well, but once i save it, the ordering break and they are ordered alphabetically.

I was wondering if its possible to anyhow save ordering of elements after drag drop in select2() fields.

Please suggest.

• javascript
• jquery
• jquery-ui
• jquery-select2

• Best way to implement this is with a cookie. – DJ. Commented Nov 12, 2013 at 13:50
• show some code of it and what unication tech are you using to unicate with server to store position of element. i think that the localStorage function is the better solution – arclite Commented Nov 12, 2013 at 13:50

4 Answers 4

Per Select2 documentation, the new ordered values are saved in a attached hidden field. http://ivaynberg.github.io/select2/

(right click on the Input field and then inspect element to find the line below just after the div#select2-container)

There are two options that might work for you:

Option 1:Easy one

Check the ordering of how you are feeding the control, specific on:

$("#e15").select2({tags:["red", "green", "blue", "orange", "white", "black", "purple", "cyan", "teal"]});

The control just render the same order that the above line is specified.

If you are not saving those values as ma separated text and instead as row records, maybe your database query is ordering them alphabetically.

Option 2: A little bit further

This code will serve you to save the ordered values in a cookie, so you can have the same order within your whole session.

$(function(){

  if ($.cookie('OrderedItemList') != null){
      $("#e15").select2({tags: $.cookie('OrderedItemList').split(',')});
   }

  $("#e15").on("change", function() { 
                         $("#e15_val").html($("#e15").val());
                         $.cookie('OrderedItemList', $("#e15").val(), { expires: 365 });
                           });

});

Please note, this code might not work for database bound fields, you might need to add some code if thats what you need.

Well I had your problem. I've overe it with something like this...

1. A hidden input to save your order.
2. the listener on the select2.

$("#reports").on('change', function(){
    var data = $(this).select2('data');
    var array = [];
    $.each(data, function(index, val) {
        array[index]=val.id;
    });
    array.join(',');
    $("input[name=reports]").val( array );
});

<form class="form-horizontal form-bordered" action="#something" method="post" accept-charset="utf-8" target="_blank" >

  <input type="text" name="reports" >
  <select id="reports" class="form-control select2me" multiple >
    <? foreach ($Balance::getSeparators() as $key => $value ) { ?>
    <option value="<?=( $key )?>"><?=( $value )?></option>
    <? } ?>
  </select>
      
</form>

This way the input[name=reports] sends to your page the correct order.

Select2 has progressed to version 4, which is based on <select/> and <option/>-tags, instead of <input/>-tags. I solved it for version 4 as follows:

$(".select2").select2().on('select2:select', function(e){
  var $selectedElement = $(e.params.data.element);
  var $selectedElementOptgroup = $selectedElement.parent("optgroup");

  if ($selectedElementOptgroup.length > 0) {
    $selectedElement.data("select2-originaloptgroup", $selectedElementOptgroup);
  }

  $selectedElement.detach().appendTo($(e.target));
  $(e.target).trigger('change');
})

Basically I remove and re-add the selected items to the select-options-list, so that they appear in order of selection.

The hidden field solution was a good solution in my case, but Select2 plugin still keep a numerical/alphabetical(?) order, that is not the user selection's order

I found a solution, that solves all my needs.

In my symfony form declaration will be the hidden field called selectOrder in which to save the current order:

$("#form_people").on('change', function(){
    var data = $(this).select2('data');
    var array = [];
    $.each(data, function(index, val) {
        array[index]=val.id;
    });
    array.join(',');
    $("#selectOrder").val( array );
});

and in the javascript part after form declaration there is my Multi Select2:

var sel = $("#form_people").select2({
    maximumSelectionSize: 3,
    minimumInputLength: 1,
    escapeMarkup: function(m) { return m; },
});

then

//After reloading page you must reselect the element with the
//right previous saved order
var order = $("#selectOrder").val().split(",");
var choices = [];
for (i = 0; i < order.length; i++) {
    var option = $('#form_people option[value="' +order[i]+ '"]');
    choices[i] = {id:order[i], text:option[0].label, element: option};
}
sel.select2('data', choices);

It's what I need, and maybe can help other developers