Create Dual List Box With Pure JavaScript – multi.js

Category: Form , Javascript , Recommended | October 21, 2018
Views Total:7,121 views
Official Page:Go to website
Last Update:October 21, 2018


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>
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


v1.4.0 (10/21/2018)

  • If limit reached, disable options except for selected ones

You Might Be Interested In:

Leave a Reply