Dropdown

A jQuery plugin for custom select elements.

Demo

Basic

Option Groups

Default Label

Multiple

Links

External Links

Cover

Custom Class

Disable

Disable Item

Use

Main

dropdown.js
dropdown.css

Dependencies

core.js
touch.js

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");

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

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