如何在 select2() 字段中保存排序顺序？

Question

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.

Answer 1

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 comma 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.

Answer 2

Well I had your problem. I've overcome 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.

Answer 3

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){
  $selectedElement = $(e.params.data.element);
  $selectedElementOptgroup = $selectedElement.parent("optgroup");
  if ($selectedElementOptgroup.length > 0) {
    $selectedElement.data("select2-originaloptgroup", $selectedElementOptgroup);
  }
  $selectedElement.detach().appendTo($(e.target));
  $(e.target).trigger('change'); //needed so that ui gets updated
})

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

Answer 4

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