JSFiddle - React, Tailwind, and code Playground

by Carl Angelo Nievarez

HTML

<div class="col-md-7">
      <select multiple="multiple" size="10" name="duallistbox_demo2" class="demo2">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3" selected="selected">Option 3</option>
        <option value="option4">Option 4</option>
        <option value="option5">Option 5</option>
        <option value="option6" selected="selected">Option 6</option>
        <option value="option7">Option 7</option>
        <option value="option8">Option 8</option>
        <option value="option9">Option 9</option>
        <option value="option0">Option 10</option>
        <option value="option0">Option 11</option>
        <option value="option0">Option 12</option>
        <option value="option0">Option 13</option>
        <option value="option0">Option 14</option>
        <option value="option0">Option 15</option>
        <option value="option0">Option 16</option>
        <option value="option0">Option 17</option>
        <option value="option0">Option 18</option>
        <option value="option0">Option 19</option>
        <option value="option0">Option 20</option>
      </select>

CSS

.bootstrap-duallistbox-container .buttons {
  width: 100%;
  margin-bottom: -1px;
}

.bootstrap-duallistbox-container label {
  display: block;
}

.bootstrap-duallistbox-container .info {
  display: inline-block;
  margin-bottom: 5px;
  font-size: 11px;
}

.bootstrap-duallistbox-container .clear1,
.bootstrap-duallistbox-container .clear2 {
  display: none;
  font-size: 10px;
}

.bootstrap-duallistbox-container .box1.filtered .clear1,
.bootstrap-duallistbox-container .box2.filtered .clear2 {
  display: inline-block;
}

.bootstrap-duallistbox-container .move,
.bootstrap-duallistbox-container .remove {
  width: 60%;
}

.bootstrap-duallistbox-container .btn-group .btn {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.bootstrap-duallistbox-container select {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.bootstrap-duallistbox-container .moveall,
.bootstrap-duallistbox-container .removeall {
  width: 40%;
}

.bootstrap-duallistbox-container.bs2compatible .btn-group > .btn + .btn {
  margin-left: 0;
}

.bootstrap-duallistbox-container select {
  width: 100%;
  height: 300px;
  padding: 0;
}

.bootstrap-duallistbox-container .filter {
  display: inline-block;
  width: 100%;
  height: 31px;
  margin: 0 0 5px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.bootstrap-duallistbox-container .filter.placeholder {
  color: #aaa;
}

.bootstrap-duallistbox-container.moveonselect .move,
.bootstrap-duallistbox-container.moveonselect .remove {
  display:none;
}

.bootstrap-duallistbox-container.moveonselect .moveall,
.bootstrap-duallistbox-container.moveonselect .removeall {
  width: 100%;
}

JavaScript

//plugin source
//====================================
;(function ($, window, document, undefined) {
  // Create the defaults once
  var pluginName = 'bootstrapDualListbox',
    defaults = {
      bootstrap2Compatible: false,
      filterTextClear: 'show all',
      filterPlaceHolder: 'Filter',
      moveSelectedLabel: 'Move selected',
      moveAllLabel: 'Move all',
      removeSelectedLabel: 'Remove selected',
      removeAllLabel: 'Remove all',
      moveOnSelect: true,                                                                 // true/false (forced true on androids, see the comment later)
      preserveSelectionOnMove: false,                                                     // 'all' / 'moved' / false
      selectedListLabel: false,                                                           // 'string', false
      nonSelectedListLabel: false,                                                        // 'string', false
      helperSelectNamePostfix: '_helper',                                                 // 'string_of_postfix' / false
      selectorMinimalHeight: 100,
      showFilterInputs: true,                                                             // whether to show filter inputs
      nonSelectedFilter: '',                                                              // string, filter the non selected options
      selectedFilter: '',                                                                 // string, filter the selected options
      infoText: 'Showing all {0}',                                                        // text when all options are visible / false for no info text
      infoTextFiltered: '<span class="label label-warning">Filtered</span> {0} from {1}', // when not all of the options are visible due to the filter
      infoTextEmpty: 'Empty list',                                                        // when there are no options present in the list
      filterOnValues: false                                                ...