Senamion.com - multiselect2side (multiple select double side) plugin: documentation and demo page

multiselect2side plugin: documentation and demo page

Demo 1 - Full demo select multiple double side

Select multiple="multiple" modified by multiselect2side

This is the javascript code to launch multiselect2side to #first select:

$().ready(function() {
	$('#first').multiselect2side();
});

Demo 2 - select multiple double side - moveOptions: false

Move buttons are disabled. Header label not present.

This is the javascript code to launch multiselect2side to #second select:

$().ready(function() {
	$('#second').multiselect2side({
		selectedPosition: 'right',
		moveOptions: false,
		labelsx: '',
		labeldx: ''
		});
});

Demo 3 - select multiple double side - selectedPosition: 'left'

Elements selected are in the left, label of move buttoms are modified.

This is the javascript code to launch multiselect2side to #third select:

$().ready(function() {
	$('#third').multiselect2side({
		selectedPosition: 'left',
		moveOptions: true,
		labelTop: '+ +',
		labelBottom: '- -',
		labelUp: '+',
		labelDown: '-',
		labelsx: '* Selected *',
		labeldx: '* Available *'
		});
});

Demo 4 - Select multiple double side with limited number of selectionable options

Select multiple="multiple" with parameter maxSelected, selectionable options limited to 4

This is the javascript code to launch multiselect2side to #first select:

$().ready(function() {
	$('#fourth').multiselect2side({maxSelected: 4});
});

Documentation

To use this jquery plugin:

include the js in the head section of the page:

<head>
...
<link rel="stylesheet" href="css/jquery.multiselect2side.css" type="text/css" media="screen" />

<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/jquery.multiselect2side.js" ></script>
...
</head>

in the read function launch the multiselect2side (select multiple double side) relative at your element:

<script type="text/javascript">
$().ready(function() {
	$("select").multiselect2side();
});
</script>

For comments see the blog page.

Parameters:

selectedPosition - position of selected elements - default 'right'
moveOptions - show move options - default true
labelTop - label of top buttom - default 'Top'
labelBottom - label of bottom buttom - default 'Bottom'
labelUp - label of up buttom - default 'Up'
labelDown - label of down buttom - default 'Down'
labelSort - label of sort buttom - default 'Sort'
maxSelected - number of max selectable options
labelsx: Left label - default '* Selected *'
labeldx: Right label - default '* Available *'

Download

You can download the entire archive:

jquery.multiselect2side.zip - a zip archive containing the plugin source, a minified version of jQuery and a demo page.

Or single file:

jquery.multiselect2side.js - js code.
jquery.multiselect2side.css - css code.

Release

0.11 - Aug 26 2010 - correct ie6 bug
0.10 - Jul 20 2010 - correct ie8 bug (padding-top)
0.9 - Jul 16 2010 - new labels button (left and right label)
0.8 - May 17 2010 - new sort button (if moveOptions is true)
0.7 - May 16 2010 - correct order options bug
0.6 - Avr 16 2010 - correct bug with optgroup
0.5 - Avr 15 2010 - Now move and updown options are vertically centered
0.4 - Avr 12 2010 - New option maxSelected
0.3 - Avr 1 2010 - New CSS
0.2 - Mar 25 2010 - New parameters moveOptions (default true)
0.1 - Mar 22 2010 - New parameters selectedPosition (default 'right')
0.0 - Feb 19 2010 - First release of multiselect2side (select multiple double side)

License

Dual licensed under the MIT and GPL licenses.