dropdown.md

Dropdown

A jQuery plugin for custom select elements.

• Use
• Options
• Methods
• CSS

Using Dropdown

Main

dropdown.js
dropdown.css

Dependencies

jQuery
core.js
scrollbar.js (optional)
touch.js (optional, for scrollbar)

Basic

To customize a select element, simply apply the plugin to the target element:

$("select").dropdown();

<select>
	<option value="1">One</option>
	<option value="2">Two</option>
	<option value="3">Three</option>
</select>

Events

React to changes to the element's value by listening for the standard change event:

$("select").on("change", function() {
	var value = $(this).val();
});

Updated the element's value externally by triggering the standard change event:

$("select").val(1).trigger("change");

Note: If the select is too close to the bottom edge of the body tag, the dropdown options will "flip" and display above the handle.

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-dropdown-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

Name	Type	Default	Description
bottomEdge	int	0
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
theme	string	"fs-light"	Theme class name
trim	int	0

---

## Methods

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

close

Closes target instance.

$(".target").dropdown("close");

defaults

Extends plugin default settings; effects instances created hereafter.

$.dropdown("defaults", { ... });

Parameters

Name	Type	Default	Description
options	object	{}	New plugin defaults

destroy

Removes plugin instance.

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

disable

Disables target instance or option.

$(".target").dropdown("disable", "1");

Parameters

Name	Type	Default	Description
option	string	null	Target option value

enable

Enables target instance or option.

$(".target").dropdown("enable", "1");

Parameters

Name	Type	Default	Description
option	string	null	Target option value

open

Opens target instance.

$(".target").dropdown("open");

update

Updates instance.

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

---

## CSS

Class	Type	Description
.fs-dropdown-element	element	Target element
.fs-dropdown	element	Base widget class
.fs-dropdown.fs-dropdown-multiple	modifer	Indicates multi-selected element
.fs-dropdown.fs-dropdown-cover	modifer	Indicates cover positioning
.fs-dropdown.fs-dropdown-bottom	modifer	Indicates bottom positioning
.fs-dropdown.fs-dropdown-disabled	modifer	Indicates disabled state
.fs-dropdown.fs-dropdown-open	modifer	Indicates open state
.fs-dropdown.fs-dropdown-focus	modifer	Indicates focus state
.fs-dropdown-selected	element	Handle item
.fs-dropdown-options	element	Options container
.fs-dropdown-group	element	Option group label
.fs-dropdown-item	element	Option item
.fs-dropdown-item.fs-dropdown-item_placeholder	modifier	Indicates placeholder item
.fs-dropdown-item.fs-dropdown-item_selected	modifier	Indicates selected item
.fs-dropdown-item.fs-dropdown-item_disabled	modifier	Indicates disabled item