Simple Dual List Box With A Search For Bootstrap 4 | duallistbox

Duallistbox is a simple, clean and filterable (multi-select) dual list box built with JavaScript and the latest Bootstrap 4 framework.

dual list box material design, dual list box with search, bootstrap listbox add remove, dual list box bootstrap 4, bootstrap dual listbox dynamically

Read More – A jQuery Plugin To Multi-Selection Function | DualSelectList

How to make use of it:

1. To use this plugin, the latest Bootstrap 4 stylesheet is loaded in the document.

<!-- Required -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<!-- Optional -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Load the JavaScript and Stylesheet plug-ins for the dual list box into the document.

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

3. Convert multiple selections to a dual list box component using the duallistbox function.

<select name="countries[]" id="test" multiple onchange="getValues()">
  <option value="Albania">Albania</option>
  <option value="Afghanistan">Afghanistan</option>
  <option value="Algeria">Algeria</option>
  <option value="Andorra">Andorra</option>
  <option value="Angola">Angola</option>
  <option value="Antigua and Barbuda">Antigua and Barbuda</option>
  <option value="Argentina">Argentina</option>
  <option value="Armenia">Armenia</option>
  <option value="Australia">Australia</option>
  <option value="Austria">Austria</option>
  <option value="Azerbaijan">Azerbaijan</option>
</select>
<script src="duallistbox.min.js"></script>

4. Get the selected options for further use.

function getValues() {
  document.getElementById('outputContainer').innerText = [...document.getElementById('test').selectedOptions].map(o => o.textContent).join(', ')
};
getValues();

Read More –

A Component For Vue.js To Select Double-sided Data
A jQuery Single/Multi-Select Plugin | sumoselect

Filterable Dual List Box With Move/Remove All Buttons, duallistbox Plugin/Github


See Demo And Download

Official Website(erwinheldy): Click Here

This superior jQuery/javascript plugin is developed by erwinheldy. For extra advanced usage, please go to the official website.

Share