Author: | maykinmedia |
---|---|
Views Total: | 687 views |
Official Page: | Go to website |
Last Update: | April 11, 2022 |
License: | MIT |
Preview:

Description:
A pure JavaScript plugin that converts the normal select box into a searchable dual list box where the users are able to move options between two selection panels.
How to use it:
Add the stylesheet ‘dual-listbox.css’ and JavaScript file ‘dual-listbox.js’ to the webpage.
<link href="dist/dual-listbox.css" rel="stylesheet"> <script src="dist/dual-listbox.js"></script>
Initialize the DualListbox on the target select box and done.
<select class="demo" multiple> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> <option value="6">Six</option> <option value="7">Seven</option> <option value="8">Eight</option> <option value="9">Nine</option> <option value="10">Ten</option> </select>
demo = new DualListbox('.selectDemo');
Default options that can be overwritten to customize the dual list box.
DualListbox('.selectDemo',{ addEvent: function(value) { console.log(value); }, removeEvent: function(value) { console.log(value); }, availableTitle: 'Different title', selectedTitle: 'Different title', addButtonText: '>', removeButtonText: '<', addAllButtonText: '>>', removeAllButtonText: '<<', options: [ {text:"Option 1", value: "OPTION1"}, {text:"Option 2", value: "OPTION2"}, {text:"Selected option", value: "OPTION3", selected:true} ] });
Changelog:
v1.4.0 (04/11/2022)
- Added 2 search boxes
v1.3.1 (02/01/2021)
- Fix enter key not submitting when focussed on another form input
v1.3.0 (10/10/2019)
- Updated
v1.2.0 (05/22/2018)
- Added the options to not show the buttons.
Can this plugin use in Angular component ?
Any suggestions/ answer on this question ?
this is brilian,
but can you disable auto sorting the end result ?
demo = new DualListbox(‘.selectDemo’);
this is wrong and it doesn’t work because class is demo and not selectDemo