Select2 ArrayAdapter to keep options in order they were selected

CustomSelect2Adapter.js

// Tested on Select2 v4.0.2

// Init
var $select = jQuery('#my-select');
var select2Options = {
  multiple: true
};

// Add decorator adapter
if (keepOptionsOrder) {
  select2Options.dataAdapter = createCustomSelect2DataAdapter();
}

// Initialize Select2
var select2 = $select.select2(selectOptions);

// Later use event `selection:update` to retrieve values in order.


//// Helpers

/**
 * Create Select2 Data Adapter
 * 
 * @return {BaseAdapter}
 */
function createCustomSelect2DataAdapter() {

  // Build dependencies
  var ArrayAdapter = jQuery.fn.select2.amd.require('select2/data/array');
  var Utils = jQuery.fn.select2.amd.require('select2/utils');

  function CustomArrayAdapter($element, options) {
      CustomArrayAdapter.__super__.constructor.call(this, $element, options);
  };

  Utils.Extend(CustomArrayAdapter, ArrayAdapter);

  // Add sorting
  CustomArrayAdapter.prototype.current = function (callback) {

      var data = [];

      this.$element.find(':selected').each(jQuery.proxy(function(i, element) {

          var $option = jQuery(element);
          var option = this.item($option);

          data.push(option);
      }, this));

      // Sort by addedOn timestamp
      data = data.sort(function(a, b) {
          return a._addedOn - b._addedOn;
      });

      callback(data);
  };

  // Add timestamp
  CustomArrayAdapter.prototype.select = function(data) {

      data._addedOn = new Date;

      return CustomArrayAdapter.__super__.select.call(this, data);
  };

  // Remove timestamp
  CustomArrayAdapter.prototype.unselect = function(data) {

      data._addedOn = undefined;

      return CustomArrayAdapter.__super__.unselect.call(this, data);
  };

  return CustomArrayAdapter;
}

Using recommended $select.val() values are retrieved in order they were set up, so to retrieve in added order so:

• you may listed to selection:update event
• use deprecated method select2.data()
• call adapter method directly select2.dataAdapter.current(function(data) { return data; });

FYI

• Line 15: var select2 = $select.select2(selectOptions);
• Line 5 declares the options object as select2Options

this is a good solution, but in my case i had to set back the data to the option element manually

var $option = this.$element.find('option').filter(function (i, elm) {
                return elm.value == data.id.toString();
            });

            if ($option.length !== 0) {
                data._addedOn = new Date;
                $option.data('data', data);
            }

This one working fine, I'm using select2 version 4 and custom adapter

I need to display where last selected option get into first.

Hi, I'm new in web development, could you please teach me how to use your adapter? like where to put it and everything? :) thankyouu

what would be a good way the date can be added to options that were selected before the select2 was initialized?