jQuery-dropdownlist

A jQuery plugin that makes it easy to transform any html-element with children into a dropdownlist.

Features

- Single- and multiselect support
- Full keyboard support
- Automatically generates form fields with the desired names
- Search text for autocomplete or filtering
- Programmatic access to the dropdown for manipulating selection
- Easy to set up with data-attributes inside your html elements
- Easy to adapt either by changing the defaults or providing options in-line

Basic usage

Includes:

``




`

Html:

`

Select all options

Choice number 1

Option 1a

Second choice

Final option

`

Javascript:

`
$('#example-dropdown').dropdownlist();
`

This will generate a dropdownlist with multiselect enabled, an element for select/deselect all and a filter will be visible inside the dropdownlist.
The input fields will have the values mentioned in the data-value attribute and the name "example-value".

Styling

The dropdownlist only provides very basic styling in the provided style sheet jquery-dropdownlist.style.css; you can use this as a template
to create your own style. The various css classes the dropdownlist uses are:

- .dropdownlist is the main container for the dropdown
- .dropdownlist-selector is the selector element that is clicked to expand the dropdown
- .dropdownlist-selector-text is where the selected item text is displayed
- .dropdownlist-selector-toggle is the toggle arrow in the default style
- .dropdownlist-search is the search/autocomplete input
- .dropdownlist-list is the list that gets displayed/hidden and includes the original element
- .dropdownlist-list-up is applied to the dropdownlist when it opens upwards instead of downwards in dynamic mode
- .dropdownlist-field` are the input fields; checkboxes are displayed in multiselect

Documentation

Full documentation can be found at the wiki