jQuery crossSelect plugin demo

Creating more intuitive multiple select form elements

This is the crossSelect plugin using default settings. Change the settings below to tailor it to your website

Pigeon street Bagpuss The mysterious cities of gold Thundercats Mr Benn Button moon The magic roundabout Jackanory Blue Peter Bodger and Badger The Chuckle Brothers

Dimensions and overflow

• Vertical display setting default scroll expand
• Horizon display setting default hide scroll expand
• Width (px)
• Font-size (px)
• Number of rows

Click behaviour

• Double click selection

  • Yes
  • No
• Single click selection

  • Yes
  • No
• Clicks accumulate

  • Yes
  • No

Language and wording

• Select btn text
• Remove btn text
• Select all btn text
• Remove all btn text

About the crossSelect plugin

This plugin can replace any multiple select element with a "switch item to the other column" interface more intuitive to use, and more similar to that seen in many desktop applications.

To apply the plug-in to a <select> tag/some <select> tags add the line, eg

$('select[multiple="multiple"]').crossSelect(); 

The plugin takes 5 optional parameters in JSON form:

• rows (integer, default 8) - the height in rows of new select box
• font (integer, default 12) - font-size in pixels
• listWidth - (integer, default 150) - minimum width of the select box
• vertical (string, default 'scroll') -
  'scroll' adds a scroll bar if the number of options is greater than the rows parameter
  'expand' ignores the rows parameter and expands to show all rows
• horizontal (string, default 'hide') -
  'scroll' adds a scroll bar if the width of any items is wider than listWidth
  'expand' expands the width to the width of the longest item
  'hide' clips the horizontal display if items are longer than the listWidth
• dblclick (boolean, default true) -
  true enables quick selection of items with a double click
  false disables double clicks

eg $('select').crossSelect({horizontal:'expand', font: '17', rows: '20'});

If you have any comments please leave a comment on my blog