Dropily.js

VainillaJS Dropdown Replace the html select with a customizable dropdown

Customizable css theme with css vars Supports hidden and disabled attributes in the options optgroups is not supported yet

Usage

// With CSS Selector
var dropdown = new Dropily('.cssSelector');

//With element reference
var select = document.querySelector('.cssSelector');
var dropdown = new Dropily(select);

// Change event is triggered in the original <select> element
select.addEventListener('change', () => {
	console.log(select.value);
})

Update the options

This is useful when you modify the options in the original select or when the selectedIndex is changed by code

var select = document.querySelector('.cssSelector');
var dropdown = new Dropily(select);
// Add or remove options in the original <select> here ...
dropdown.Update();

Select a option

var select = document.querySelector('.cssSelector');
var dropdown = new Dropily(select);
// Select the first option
dropdown.Select(0);

Open or close the dropdown

// Open the dropdown
dropdown.Open();
// Close the dropdown
dropdown.Close();
// Toggle the state of the dropdown
dropdown.Toggle();

Remove the custom dropdown and restore the original select

dropdown.Remove();

For build

Build lib

$ yarn install ## or npm
$ yarn build

Build example

$ yarn install ## or npm
$ yarn build:example

Authors