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 ...

Source List



Destination List

Adding Tandem Select to your Form

1: Get the Plugin from GitHub -- tandem_select_jquery_plugin

There are three components

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



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.