Selecter

A jQuery plugin for replacing default select elements.

Current Version: 3.1.10


Documentation Demo

Installation

Include the following resources on your page before initializing:

<script src="jquery.fs.selecter.js"></script>
<link href="jquery.fs.selecter.css" rel="stylesheet">

Bower

You can deploy and update via the command line with Bower:

bower install Selecter

Options

Options are set by passing a valid options object at initialization or to the public "defaults" method. You can also set custom options for a specific instance by attaching a data-boxer-options attribute containing a properly formatted JSON object to the target element.

Name Type Default Description
callback function $.noop Select item callback
cover boolean false Cover handle with option set
customClass string '' Class applied to instance
label string '' Label displayed before selection
external boolean false Open options as links in new window
links boolean false Open options as links in same window
mobile boolean false Force desktop interaction on mobile
trim int 0

Methods

Methods are publicly available to all active instances, unless otherwise stated.

defaults

Sets default plugin options

$.selecter("defaults", opts);
Parameter Type Default Description
opts object {} Options object

disable

Disables target instance or option

$(".target").selecter("disable", "1");
Parameter Type Default Description
option string null Target option value

destroy

Removes instance of plugin

$(".target").selecter("destroy");

enable

Enables target instance or option

$(".target").selecter("enable", "1");
Parameter Type Default Description
option string null Target option value

update

Updates instance base on target options

$(".target").selecter("update");

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

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({
	label: "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("VALUE: " + 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'

Scroller

With Scroller Support:

Demo