Create Dual List Box With Pure JavaScript – multi.js

multi.js is a lightweight JavaScript plugin that transforms the normal multiple select into a filterable/searchable dual list box interface for easier option selection. You can switch options between 2 select boxes by clicking.

How to use it:

Include the multi.js plugin’s files on the html page.

<link rel="stylesheet" href="/multi.min.css">
<script src="/multi.min.js"></script>

Initialize the multi.js plugin on the target multiple select and done.

<select multiple id="demo">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

var select = document.getElementById('demo');
multi( select );

Possible options to customize the multi.js plugin.

multi( select,{
  // enable search
  enable_search: true,
  // placeholder of search input
  search_placeholder: 'Search...'
  non_selected_header: null
  selected_header: null
  
});

Changelog:

v1.4.0 (10/21/2018)

• If limit reached, disable options except for selected ones