Selleckt demo

Selleckt is a select replacement plugin that progressively enhances the underlying select.

It's compatible with modern browsers, and IE8 compatibility is possible with an Object.create shim (there's one included in the source of this page.)

Source and documentation is at https://github.com/BrandwatchLtd/selleckt

Single select

Replaces a standard select element

Single select with search

Replaces a standard select element. Adds filtering functionality.

Multi select

Replaces select elements with the "multiple" attribute.

A list of selections is rendered separately and may be added to / removed from

Fancy select

Multi select with a template with extra links in a "footer", and links for selected items on mouseover.

A custom handler is set up for the first footer link as follows:

$select3.selleckt({
    mainTemplate : fancyTemplate,  //view source for this
    selectionTemplate: selectionTemplate, //and view source for this too
    itemTemplate: fancyItemTemplate, //and view source for one
    popupTemplate: fancyPopupTemplate, //and finally, view source for this one
    selectedClass: 'selected',
    selectedTextClass: 'selectedText',
    itemsClass: 'items',
    itemClass: 'item',
});

//get access to the selleckt element and bind to the click event on the add link
$select3.data('selleckt').$sellecktEl.on('click', '.add', function(e){
    e.preventDefault();
    e.stopPropagation();
    alert('Hey, you clicked the "add button"');
});

View source for the rest of the setup!

Adding items

Click the button to add a new item

Select the new item immediately

Removing items

Click the button to remove the "Bar" item