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.
This is the javascript code to launch multiselect2side to #second select:
$().ready(function() {
$('#second').multiselect2side({selectedPosition: 'right', moveOptions: false});
});
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: '-'
});
});
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
Download
You can download the entire archive:
Or single file:
Release
- 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.