1.0.0-b • Published 4 years ago
dropily.js v1.0.0-b
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