Dropdownizer NPM

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.