JqueryJquery plugins   PortFolioSenamion's PortFolio HomeHome page corner A jquery blog

Senamion.com


Senamion:

Categorie:

Archivi:

multiselect2side plugin: documentation and demo page

Demo Search - Full demo select multiple double side with search option true (1000 elements)

Select multiple="multiple" modified by multiselect2side


Click here to test the select above
Result of a php print_r() function:

---

Click here to hide/show original select

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

$().ready(function() {
	$('#searchable').multiselect2side({'search': 'Search: '});
});
				

Demo 1 - Full demo select multiple double side

Select multiple="multiple" modified by multiselect2side


Click here to test the select above
Result of a php print_r() function:

---

Click here to hide/show original select

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

$().ready(function() {
	$('#first').multiselect2side({
		optGroupSearch: "Group: ",
		search: "<img src='jquery.multiselect2side/img/search.gif' />"
	});
});
				

Demo 2 - select multiple double side - moveOptions: false, autoSort: true

Move buttons are disabled but is enable autoSort. Header label not present.


Click here to test the select above
Result of a php print_r() function:

---

Click here to hide/show original select

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

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

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

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


Click here to test the select above
Result of a php print_r() function:

---

Click here to hide/show original select

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 *',
		search: "Find: "
		});
	$('#third')
		.multiselect2side('addOption', {name: 'test selected', value: 'test1', selected: true})
		.multiselect2side('addOption', {name: 'test not selected', value: 'test2', selected: false});
});
				

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

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


Click here to test the select above
Result of a php print_r() function:

---

Click here to hide/show original select

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

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

	$('#fourth')
		.multiselect2side('addOption', {name: 'test selected', value: 'test1', selected: true})
		.multiselect2side('addOption', {name: 'test not selected', value: 'test2', selected: false});
});
				

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.

Options:

  • optGroupSearch - use optgroup label to select elements - default false
  • minSize - default minSize of selects - default 6
  • 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 *'
  • autoSort: Automatic sort of selected options - default false
  • autoSortAvailable: Automatic sort of available options - default false
  • search: string for add search funcionality - default false = no search
  • caseSensitive: type of search - default false
  • delay: the delay in milliseconds the search option waits after a keystroke to activate itself - default 200

Methods:

  • destroy - destroy multiselect2side
  • addOption - add option to select(s). See example #fourth and #third selects above. Options:
    • name: name of new value
    • value: value of new value
    • selected: if true option is inserted in "selected" list, else in "available"

Download

You can download the entire archive:

Or single file:

Release

  • 1.1 - May 04 2011 - correct some little bugs
  • 1.0 - Apr 04 2011 - new optGroupSearch and minSize options, new methods destroy and addOption
  • 0.16 - Mar 15 2011 - new autoSortAvailable option
  • 0.15 - Mar 14 2011 - new search options
  • 0.14 - Feb 2 2011 - correct FF autoSort bug
  • 0.13 - Jan 26 2011 - new autoSort parameter
  • 0.12 - Nov 19 2010 - correct opera bug + new demo
  • 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.