A jQuery plugin that makes it easy to transform any html-element with children into a dropdownlist.
npm install @vdt-jquery/jquery-dropdownlist
`
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