JSFiddle - React, Tailwind, and code Playground

by vol7ron

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select multiple="multiple">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c" selected="selected">C</option>
  <option value="d">D</option>
</select>

SCSS

select {
  width: 50%;
}

Babel + JSX

let $select2 = $('select').select2();


/**
 * defaults: Cache order of the initial values
 * @type {object}
 */
let defaults = $select2.select2('data');
defaults.forEach(obj=>{
  let order = $select2.data('preserved-order') || [];
  order[ order.length ] = obj.id;
  $select2.data('preserved-order', order)
});


/**
 * select2_renderselections
 * @param  {jQuery Select2 object}
 * @return {null}
 */
function select2_renderSelections($select2){
  const order      = $select2.data('preserved-order') || [];
  const $container = $select2.next('.select2-container');
  const $tags      = $container.find('li.select2-selection__choice');
  const $input     = $tags.last().next();

  // apply tag order
  order.forEach(val=>{
    let $el = $tags.filter(function(i,tag){
      return $(tag).data('data').id === val;
    });
    $input.before( $el );
  });
}


/**
 * selectionHandler
 * @param  {Select2 Event Object}
 * @return {null}
 */
function selectionHandler(e){
  const $select2  = $(this);
  const val       = e.params.data.id;
  const order     = $select2.data('preserved-order') || [];
  
  switch (e.type){
    case 'select2:select':      
      order[ order.length ] = val;
      break;
    case 'select2:unselect':
      let found_index = order.indexOf(val);
      if (found_index >= 0 )
        order.splice(found_index,1);
      break;
  }
  $select2.data('preserved-order', order); // store it for later
  select2_renderSelections($select2);
}

$select2.on('select2:select select2:unselect', selectionHandler);


// Demo for default
runDemo($select2);
function runDemo($select2){
	var selected = ['c','a','d'];
  $select2
    .val( selected )
    .data('preserved-order',selected)  // must manually preserve the order
    .trigger('change'); 
    
  // Render in preserved order
  select2_renderSelections($select2);
  
  console.log('$select2.val():', $select2.val());
  console.log(
    "$select2.data('preserved-order'):", 
    $select2.data('preserved-order')
  );
}