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
EnableCompatibility
- 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.