Selecter

A jQuery plugin for replacing default select elements.

Replace those boring default select elements with something a little nicer. Selecter also integrates with Scroller, giving you complete control of your project's UI. Oh, and they play nice with that shiny new responsive layout (try resizing this window).

Configuration

Option	Default	Description
`callback`	`function() {}`	Function fired when user makes a selection
`cover`	`false`	Set option list to cover handle
`customClass`	`""`	Class added to Selecter element
`defaultLabel`	`false`	Text to display on initialization
`links`	`false`	Options act as jump-links and open in a new window
`externalLinks`	`false`	Options act as jump-links and open in the same window
`trimOptions`	`false`	Number of charachters to display; Automatically truncates

Methods

Method	Params	Description
`defaults`	`{}`	Set default options
`enable`		Enable the field
`disable`		Disable the field
`destroy`		Remove all traces of 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

Mobile

The mobile pop-up has been removed as of version 1.9.3, instead Selecter allows the mobile browser to handle all interactions. This ensures a better experience for the user and simplifies mobile development, making Selecter the perfect way to style a select element consistently across all browsers.

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

Disabling

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'

Compatibility

Requires jQuery 1.7+
Tested in Firefox, Chrome, Safari, IE8+

License

Released under the MIT License. Feel free to use it in personal and commercial projects.