selectList

selectList is a jQuery plugin that replaces the standard HTML multiple select element with a nicer and more user-friendly interface. The user selects a number of items from a drop-down list, and the selected items are displayed below.

Plugin features:

  • Attaches to an existing <select> element, requiring no changes to HTML code
  • Supports automatic sorting of selected items
  • Allows the use of callback functions when items are added and removed
  • Provides API functions to add/remove items
  • Supports custom animations/effects
  • Supports CSS styling
  • Lightweight — the minified version is less than 4KB

The plugin works in all major browsers, including Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and Internet Explorer 6+.

Live Example

Which languages do you speak?

Select one or more languages in the drop-down list.
Click on a selected item to remove it from your selection.

» See more examples

Quick Usage Instructions

Download the plugin, unzip it, and copy the JavaScript and CSS files to your website/application directory. Load the files in the <head> section of your HTML document.

<head>
 ...
 <link rel="stylesheet" type="text/css" href="css/selectlist.css" />
 <script type="text/javascript" src="scripts/jquery.min.js"></script>
 <script type="text/javascript" src="scripts/jquery.selectlist.min.js"></script>
 ...
</head>

Let's assume you have a <select> element with an id of "languages", and you want to use selectList with it.

<select id="languages" multiple="multiple" name="languages[]">
 <option value="Czech">Czech</option>
 <option value="Dutch">Dutch</option>
 ...
</select>

Wrap the select element in a jQuery object, and enable the plugin by calling the selectList method:

<script type="text/javascript">
  $(document).ready(function () {
    $('select#languages').selectList({ sort: true });
  });
</script>

That's it — enjoy!

» Read documentation

Download

jquery.selectlist-0.6.1.zip – a zip archive containing the plugin source (minified version included), a minified version of jQuery, and CSS files.

License

Dual licensed under the MIT and GPL licenses.

Links

selectList on jQuery Plugins

selectList on GitHub

pinvoke - Icons and pixel fonts
The cross icon (cross-circle.png) included with the plugin comes from the excellent Fugue Icons set available at that page.