Converts HTML <select> elements into customizable dropdowns.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
example
src
style
.babelrc
.eslintrc
.gitignore
.jsdocrc
CHANGELOG.md
LICENSE.md
README.md
package-lock.json
package.json

README.md

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.