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.