JSFiddle - React, Tailwind, and code Playground

by Bang Nguyen

HTML

<div class="container">
  <div class="row">
    <div class="col-xs-5">
      <select
        name="from[]"
        id="multiselect"
        class="form-control"
        size="8"
        multiple="multiple"
      >
        <option value="1">Item 1</option>
        <option value="2">Item 5</option>
        <option value="2">Item 2</option>
        <option value="2">Item 4</option>
        <option value="3">Item 3</option>
      </select>
    </div>

    <div class="col-xs-2">
      <button type="button" id="multiselect_rightAll" class="btn btn-block">
        <i class="glyphicon glyphicon-forward"></i>
      </button>
      <button
        type="button"
        id="multiselect_rightSelected"
        class="btn btn-block"
      >
        <i class="glyphicon glyphicon-chevron-right"></i>
      </button>
      <button type="button" id="multiselect_leftSelected" class="btn btn-block">
        <i class="glyphicon glyphicon-chevron-left"></i>
      </button>
      <button type="button" id="multiselect_leftAll" class="btn btn-block">
        <i class="glyphicon glyphicon-backward"></i>
      </button>
    </div>

    <div class="col-xs-5">
      <select
        name="to[]"
        id="multiselect_to"
        class="form-control"
        size="8"
        multiple="multiple"
      ></select>
    </div>
  </div>
</div>

CSS

body {
  background: #444;
  margin-top: 3rem;
}

JavaScript

if ("undefined" == typeof jQuery) throw new Error("multiselect requires jQuery")
!(function (t) {
  "use strict"
  var e = t.fn.jquery.split(" ")[0].split(".")
  if (e[0] < 2 && e[1] < 7)
    throw new Error("multiselect requires jQuery version 1.7 or higher")
})(jQuery),
  (function (t) {
    "function" == typeof define && define.amd
      ? define(["jquery"], t)
      : t(jQuery)
  })(function (t) {
    "use strict"
    var e = (function (t) {
      function e(e, o) {
        var i = e.prop("id")
        ;(this.$left = e),
          (this.$right = t(t(o.right).length ? o.right : "#" + i + "_to")),
          (this.actions = {
            $leftAll: t(t(o.leftAll).length ? o.leftAll : "#" + i + "_leftAll"),
            $rightAll: t(
              t(o.rightAll).length ? o.rightAll : "#" + i + "_rightAll",
            ),
            $leftSelected: t(
              t(o.leftSelected).length
                ? o.leftSelected
                : "#" + i + "_leftSelected",
            ),
            $rightSelected: t(
              t(o.rightSelected).length
                ? o.rightSelected
                : "#" + i + "_rightSelected",
            ),
            $undo: t(t(o.undo).length ? o.undo : "#" + i + "_undo"),
            $redo: t(t(o.redo).length ? o.redo : "#" + i + "_redo"),
          }),
          delete o.leftAll,
          delete o.leftSelected,
          delete o.right,
          delete o.rightAll,
          delete o.rightSelected,
          (this.options = {
            keepRenderingSort: o.keepRenderingSort,
            submitAllLeft: void 0 !== o.submitAllLeft ? o.submitAllLeft : !0,
            submitAllRight: void 0 !== o.submitAllRight ? o.submitAllRight : !0,
            search: o.search,
            ignoreDisabled: void 0 !== o.ignoreDisabled ? o.ignoreDisabled : !1,
          }),
          delete o.keepRenderingSort,
          o.submitAllLeft,
          o.submitAllRight,
          o.search,
          o.ignoreDisabled,
          (this.callbacks = o),
...