odyniec.net

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 packed version is less than 3KB

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


Download
Examples
Documentation

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.pack.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.1.2.zip – a zip archive containing the plugin source (packed version included), a minified version of jQuery, CSS files, and license files.

License

Dual licensed under the MIT and GPL licenses.

Links

selectList on jQuery Plugins

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.