Dropdown
A jQuery plugin for custom select elements.
Demo
Demos are largely unstyled to give developers a better idea of how the plugin can drop into a new or existing project.
<select name="dropdown" class="dropdown">
	<option value="1">One</option>
	<option value="2">Two</option>
</select>
$(".dropdown").dropdown({
label: "Select an Item"
});
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 |
native |
boolean |
false |
Use native browser options |
theme |
string |
"fs-light" |
Theme class name |
trim |
int |
0 |
|
selectMultiple |
boolean |
false |
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.fs-dropdown-native |
modifer |
Indicates native options |
.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 |