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
EnableYou can also disable and enable individual options by passing that option's value:
$("select").selecter("disable", "value");
$("select").selecter("enable", "value");