Tandem Select jQuery Plugin

A standard HTML multiple Select menu allows the user to select multiple options using Command-Click. But when the list of options is long, requiring the user to scroll, it becomes cumbersome and prone to errors.

An effective solution is to use two select menus in tandem, with buttons allowing options to be swapped between the two.

Tandem Select implements this as a jQuery Plugin - simple to set up and easy to customize.

Try it out ...

• Select options in the Source list, click the right arrow button to move them to the Destination list.
• Remove options from the Destination list with the left arrow button.
• Search for options in the Source List with the Search field.

Adding Tandem Select to your Form

1: Get the Plugin from GitHub -- tandem_select_jquery_plugin

There are three components

• tandem_select.js - the jQuery plugin itself
• tandem_select.css - a set of CSS definitions that you can use as a starting point
• tandem_select_template.txt - a block of template HTML code for you to copy and customize

2: Add jQuery and the Tandem Select CSS and JS files to the HEAD of your web page

3: Replace your existing multiple select with the Tandem Select template code

Add your unique ID and NAME attributes to the Destination Select menu

4: Add a JavaScript function that invokes Tandem Select

Add this code block to the HEAD section of your page, making sure to replace YOUR_ID with the ID of your select menu.

Multiple tandem select menus can be included in the same form. Repeat the tandemSelect() call with the ID of each menu.

5: Modify the CSS file to customize the look and layout of the Select menus and buttons - More Details

Examples

• Demo 1   Simple example with one Tandem Select in a three column layout
• Demo 2   Alternate example with one Tandem Select in a two column layout
• Demo 3   Example with two Tandem Selects in a three column layout

Author

The Tandem Select plugin was written by Rob Jones of Craic Computing in Seattle.

It is made freely available under the terms of the MIT License.

There are several other implementations of tandem Select menus - for example, the work of Jeremy Martin and David Walsh.

Code syntax highlighting on this page uses SyntaxHighlighter by Alex Gorbatchev.