JSFiddle - React, Tailwind, and code Playground

by Hans Lammerts

HTML

<script src="http://devblog.jasonhuck.com/assets/comboselect/jquery.selso.js"></script>
<!doctype html>
<body>
  <select id="ll" name="ll" class="left" multiple="multiple">
    <option id="o1" value="1">AAA</option>
    <option id="o2" value="2">BBB</option>
    <option id="o3" value="3">CCC</option>
    <option id="o4" value="4">DDD</option>
    <option id="o5" value="5">EEE</option>
    <option id="o6" value="6">FFF</option>
    <option id="o7" value="7">GGG</option>
    <option id="o8" value="8">HHH</option>
    <option id="o9" value="9">III</option>
    <option id="o10" value="10">JJJ</option>
    <option id="o11" value="11">KKK</option>
    <option id="o12" value="12">LLL</option>
    <option id="o13" value="13">MMM</option>
    <option id="o14" value="14">NNN</option>
    <option id="o15" value="15">OOO</option>
    <option id="o16" value="16">PPP</option>
  </select>
  <input type="button" class="add" value=" &gt; " />
  <input type="button" class="remove" value=" &lt; " />
  <div id="lr" name="lr" class="right" style="display: flex; justify-content: space-around; border: 1px solid black; width: 50%; height: 60px;">
  </div>
</body>
</html>

JavaScript

$(function(){
  // sorts all the combo select boxes
  function sortBoxes(){
    $('select.left,div.right').find('option').selso({
      type: 'alpha',
      extract: function(o){ return $(o).text(); }
    });
    // clear all highlighted items
    $('select.left, div.right').find('option:selected').removeAttr('selected');
  }

  // add/remove buttons for combo select boxes
  $('input.add').click(function(){
    var left = $(this).parent().parent().find('select.left option:selected');
    var right = $(this).parent().parent().find('div.right');
    right.append(left);
    sortBoxes();
  });

  $('input.remove').click(function(){
    var left = $(this).parent().parent().find('select.left');
    var right = $(this).parent().parent().find('div.right option:selected');
    left.append(right);
    sortBoxes();
  });
});