a jQuery plugin to provid multiple-select function through 2 List-Boxes

Last update: Nov 1, 2022

Related tags

Learning resource DualSelectList

Overview

bala.DualSelectList

bala.DualSelectList is a jQuery plugin to provid multiple-select function through 2 List-Boxes.

Demo page:

Single Element: https://balachuang.github.io/DualSelectList/demo_1.html
Multiple Elements: https://balachuang.github.io/DualSelectList/demo_2.html

How to use:

1. Create DualSelectList with candidate items and default color

var dsl = $('#dualSelectExample').DualSelectList({
	'candidateItems' : ['Item 01', 'Item 02', 'Item 03', 'Item 04', 'Item 05', 'Item 06', 'Item 07'],
	'selectionItems' : ['Item 08', 'Item 09', 'Item 10'],
	'colors' : {
		'itemText' : 'white',
		'itemBackground' : 'rgb(0, 51, 204)',
		'itemHoverBackground' : '#0066ff'
	}
});

These strings can be used as color name:

Color Name	Discription
panelBackground	Set / Reset the background-color feature of panel
filterText	Set / Reset the color feature of filter
itemText	Set / Reset the color feature of item
itemBackground	Set / Reset the background-color feature of item
itemHoverBackground	Set / Reset the background-color feature of item when mouse over
itemPlaceholderBackground	Set / Reset the background-color feature of item placeholder
itemPlaceholderBorder	Set / Reset the border-color feature of item placeholder

2. Set candidate / selection items after DualSelectList created

var dsl = $('#dualSelectExample').DualSelectList();
dsl.setCandidate(['Item 01', 'Item 02', 'Item 03', 'Item 04', 'Item 05']);
dsl.setSelection(['Item 06', 'Item 07', 'Item 08', 'Item 09', 'Item 10']);

3. Set / Reset item color after DualSelectList created

var dsl = $('#dualSelectExample').DualSelectList();
dsl.setColor('panelBackground', 'yellow');
dsl.resetColor('panelBackground');

The color names list in (1) can be used as the first parameter. Using resetColor('') to reset all color.

4. Get select result

var res = dsl.getSelection();

2021/04/04 - New Feature:

Candidate / Selection items can be either pure String or Object with "value" property.

dsl.setCandidate(['Item 01', 'Item 02', 'Item 03', 'Item 04', 'Item 05']);
dsl.setSelection(['Item 06', 'Item 07', 'Item 08', 'Item 09', 'Item 10']);

'candidateItems' : [{'id':0, 'value':'Item 01'},
                    {'id':1, 'value':'Item 02'},
                    {'id':2, 'value':'Item 03'},
                    {'id':3, 'value':'Item 04'},
                    {'id':4, 'value':'Item 05'} ],
'selectionItems' : [{'id':5, 'value':'Item 06'},
                    {'id':6, 'value':'Item 07'},
                    {'id':7, 'value':'Item 08'} ],

A new parameter for getSelection() to decide what data type will be returned.

var res = dsl.getSelection(true);  // Get an Array of String only
var res = dsl.getSelection(false); // Get an Array of full Json Objects

The jQuery Plugin Registry is now in read-only mode. https://plugins.jquery.com/

Comments

Multiple DualSelects

Thank you for a great tool!
i have added two Dual Selectors to one web page. everything works ok except the drag and drop. i think it's having a problem with the class names and not knowing which left panel to put the Items into. do you know if i can use two DualSelect controls on one page. each one needs to function independently. can i use an id or dif class names to drag and drop the items from right to left and back?

opened by ace540i 2
Is it Possible to Add 'Value' Property to Item

Hi, In my project, items also have id numbers. Users can see only item names but i work with item's id numbers. So is it possible to add Value property to your DualSelectList? For example:

'candidateItems' : [{"id":1,"text":"Item 1"}, {"id":2,"text":"Item 2"}] ...

opened by buzkanlamaca 2
Bug Fix: item gets "stuck" to mouse

I had integrated this plugin into my website and found a bug where sometimes when I drop the item, it won't actually drop and it gets "stuck" to my mouse and I can't let go of the item I'm dragging.

This fix adds the ability for the user to press escape and it will drop the item into the nearest panel.

I'm not sure if anyone else ran into this problem, but I think it is a good backup plan just in case!

opened by rginnow 0
Correct position

Function findItemLocation find targetPanel This line: if (objItem.position().left <= (0.5 * thisLftPanel.width())) { Correct line as follows: if (objItem.position().left <= (thisLftPanel.position().left + (0.5 * thisLftPanel.width()))) {

opened by benman-it 0

issue working with bootstrap 4

This is very beautiful plugin, but i m not able to use the plugin with Bootstrap 4 and jquery 3,

below are the scripts i m using

	<script src="webjars/jquery/3.5.1/jquery.slim.min.js"></script>
	<script src="webjars/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="webjars/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	<script th:src="@{/assets/bootstrap-dual-listbox/jquery.bootstrap-duallistbox.min.js}"></script>
		<script
		th:src="@{/summernote/summernote-bs4.min.js}"></script>
		<script
		th:src="@{/summernote/summernote-image-attributes.js}"></script>
			<script th:src="@{js/main.js}"></script>
			
                        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>jQuery.noConflict(true);</script>

I get below error Uncaught TypeError: $(...).DualSelectList is not a function at HTMLDocument. (event-update-action?idVal=1:832) at e (jquery.slim.min.js:2) at t (jquery.slim.min.js:2)

Can you please let me know what modification i need to do

opened by guysmart694 0

Remove from Left Panel

data from dual select - right panel is saved to my DB. then when i reload from DB i load right panel but i would like to remove from left panel.
How can i remove items from left panel?

opened by ace540i 1

a jQuery plugin to provid multiple-select function through 2 List-Boxes

Related tags

Overview

bala.DualSelectList

How to use:

1. Create DualSelectList with candidate items and default color

2. Set candidate / selection items after DualSelectList created

3. Set / Reset item color after DualSelectList created

4. Get select result

2021/04/04 - New Feature:

Candidate / Selection items can be either pure String or Object with "value" property.

A new parameter for getSelection() to decide what data type will be returned.

Comments

Multiple DualSelects

Is it Possible to Add 'Value' Property to Item

Bug Fix: item gets "stuck" to mouse

Correct position

issue working with bootstrap 4

Remove from Left Panel

Owner

VanillaSelectBox - A dropdown menu with lots of features that takes a select tag and transforms it into a single or multi-select menu with 1 or 2 levels

Create info-boxes in a simple way

A beautiful, responsive, highly customizable and accessible replacement for JavaScript's popup boxes. Zero dependencies.Alerts ,dialogs

A quickstart AWS Lambda function code generator. Downloads a template function code file, test harness file, sample SAM deffiniation and appropriate file structure.

Tries to execute sync/async function, returns a specified default value if the function throws

Wrap a function with bun-livereload to automatically reload any imports inside the function the next time it is called

Bootstrap5-tags - Replace select[multiple] with nices badges

Converts select multiple elements into dropdown menus with checkboxes

Pure JavaScript (VanillaJS) dropdown menu, with multiple select and searching support

Uneasy is a Web Application where you can select and remove multiple followings from your twitter.

Journeys is a django based community-focused website that allows users to bookmark URLs (through chrome extension) and share their journeys through timelines.

Using a RPI 3b+ to create a PT camera accessible through Windows browser and controllable through MQTT

To-Do list a web app for tracking personal progress through the day. Users can input a list of tasks and mark them as completed once they are done. Built with JavaScript and Webpack

The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 5 support.

The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 5 support

Picky is a jQuery plugin that provides simple client-side date validation when entering dates using select tags.

A jQuery Single/Multi Select plugin which can be used on almost any device

Nest multiple blocks inside lists of any kind of list (ordered, unordered, no marker, etc), or do away with list markers and use it like a repeater!

A Minimalist to do list website where user can add, remove and edit multiple tasks and All the changes user makes in his to do list is saved in browser local storage so that it can be accessed later.