jQuery Selecter Examples

Basic

The most basic method is simply applying the Selecter plugin:

$("select").selecter();

Demo

Option Groups

Selecter automatically detects optgroup tags, allowing you to style groups:

$("select").selecter();

Demo

Multiple

Selecter will also automatically detect mutiple select elements:

$("select").selecter();

Demo

Default Label

The default label will be displayed on initiallization instead of the selected element.

$("select").selecter({
	defaultLabel: "Select An Item"
});

Demo

Links

The options can also be links, think "jump navigation":

$("select").selecter({
	links: true
});

Demo

External Links

The links can also open in a new window or tab:

$("select").selecter({
	externalLinks: true
});

Demo

Cover

The options list can cover the handle, sort of Safari-style:

$("select").selecter({
	cover: true
});

Demo

Class

Define a custom CSS class to have multiple visually distinct Selecters on the same page:

$("select").selecter({
	customClass: "custom"
});

Demo

Callback

The function passed as a callback will receive the newly selected value as the first parameter:

$("select").selecter({
	callback: selectCallback
});

function selectCallback(value, index) {
    alert("OPTION SELECTED: " + value + ", INDEX: " + index);
}

Demo

Disable

Selecter will automatically detect disabled fields, but you can always manually trigger the disable or enable event:

$("select").selecter("disable");

$("select").selecter("enable");

Demo

Enable

You can also disable and enable individual options by passing that option's value:

$("select").selecter("disable", "value");

$("select").selecter("enable", "value");

Demo

Enable Option 'One'