Create Dual List Box With Pure JavaScript – multi.js

Category: Form , Javascript , Recommended | October 21, 2018
Author: Fabianlindfors
Views Total: 2,640
Official Page: Go to website
Last Update: October 21, 2018
License: MIT

Preview:

Create Dual List Box With Pure JavaScript – multi.js

Description:

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

You Might Be Interested In:


Leave a Reply