Dropdownizer
Converts HTML select
elements into customizable dropdowns.
This project...
- Is lightweight and dependency free.
- Includes support for native mobile dropdowns.
- Keeps original
select
elements in sync. - Properly resizes the dropdown to match the longest line.
- Works with standard
change
events and a proprietaryonChange
method.
Usage
npm i dropdownizer
Node
let Dropdownizer = ;
Minified version:
let Dropdownizer = ;
Browser
;
Minified version:
;
Script tag:
Stylesheet
Documentation
See the documentation.
Examples
Pass in a string
to bind to the matching element(s).
"select";
Pass in an HTMLElement
to bind to the matching element(s).
document;
Use the onChange
method.
"#my-dd";
Listen to a change
event.
let dropdown = document; dropdown; dropdown;
Use the onOpen
and onClose
methods.
"#my-dd";
See live examples.
Notes
- Non-inline styles applied directly to the
select
element and/or itsid
are not copied to the dropdownizer instance. Use classes if you want sync styles. - The
change
event and proprietaryonChange
method differ in what's returned.- The
change
event is dispatched from the original element while theonChange
method belongs to the dropdownizer instance.
- The
- Auto-size logic is not 100% accurate when a dropdown is initially invisible. Please test accordingly if your dropdown starts off in a hidden state.
Changelog
See the changelog here.
License
Copyright (c) 2015, 2017-2018 Leandro Silva (http://grafluxe.com)
Released under the MIT License.
See LICENSE.md for entire terms.