bala.DualSelectList

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

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();

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