Author: | maykinmedia |
---|---|
Views Total: | 3,081 views |
Official Page: | Go to website |
Last Update: | September 30, 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:
1. 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>
2. 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');
3. Here is a list of all default options that can be overwritten to customize the dual list box.
new DualListbox("#select", { availableTitle: "Different title", selectedTitle: "Different title", addButtonText: ">", removeButtonText: "<", addAllButtonText: ">>", removeAllButtonText: "<<", sortable: true, upButtonText: "ᐱ", downButtonText: "ᐯ", draggable: true, // add more options here options: [ { text: "Option 1", value: "OPTION1" }, { text: "Option 2", value: "OPTION2" }, { text: "Selected option", value: "OPTION3", selected: true }, ], // events addEvent: function (value) { console.log(value); }, removeEvent: function (value) { console.log(value); }, });
4. Event handlers.
dualListbox.addEventListener("added", function (event) { console.log(event); console.log(event.addedElement); }); dualListbox.addEventListener("removed", function (event) { console.log(event); console.log(event.removedElement); });
Changelog:
v2.0.0 (09/30/2022)
- Drag and drop support.
- Better ordering.
- Single list of options.
v1.4.0 (09/29/2022)
- Added 2 search boxes
- Reworked the drag drop. Now works on multiple browsers
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