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 proprietary onChange method.

Usage

npm i dropdownizer

Node

let Dropdownizer = require("dropdownizer");

Minified version:

let Dropdownizer = require("dropdownizer/dist/Dropdownizer.min");

Browser

import Dropdownizer from "dropdownizer";

Minified version:

import Dropdownizer from "dropdownizer/dist/Dropdownizer.min";

Script tag:

<script src="node_modules/dropdownizer/dist/Dropdownizer.min.js"></script>

Stylesheet

<link rel="stylesheet" href="node_modules/dropdownizer/style/dropdownizer.css">

Documentation

See the documentation.

Examples

Pass in a string to bind to the matching element(s).

new Dropdownizer("select");

Pass in an HTMLElement to bind to the matching element(s).

new Dropdownizer(document.querySelector("select"));

Use the onChange method.

new Dropdownizer("#my-dd").onChange(evt => {
  console.log(evt.data.value);
});

Listen to a change event.

let dropdown = document.querySelector("#my-dd");

dropdown.addEventListener("change", evt => {
  console.log(evt.target.value);
});

new Dropdownizer(dropdown);

Use the onOpen and onClose methods.

new Dropdownizer("#my-dd").onOpen(evt => {
  console.log("opened", evt.target);
}).onClose(evt => {
  console.log("closed", evt.target);
});

See live examples.

Notes

• Non-inline styles applied directly to the select element and/or its id are not copied to the dropdownizer instance. Use classes if you want sync styles.
• The change event and proprietary onChange method differ in what's returned.
  • The change event is dispatched from the original element while the onChange method belongs to the dropdownizer instance.
• 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.