Vanilla JavaScript Dropdown - a tiny (~700 bytes gzipped) select tag replacement with optgroups support.
npm install vanilla-js-dropdown  !Dependencies
Tiny (_0.7 KB gzipped!_) JavaScript replacement for that makes styling easy and consistent.
_— Inspired by the blazing fast, lightweight, cross-platform and crazy popular Vanilla JS framework._
Reads the original element's options (_with respect of selected, if any_), creates and attaches the pseudo-select just before the original one, and hides the original.
Upon selection it updates the original , so when you submit your form the value will be there.
JavaScript disabled? No problem! Nicely degrades to original .
| Option | Required | Description |
| ------ | -------- | ------------------------------------------------------------------ |
| elem | yes | _id_ of the select you want to replace or a direct DOM element |
| Method | Description |
| --------- | ----------------------------------------- |
| .toggle() | Opens the select if closed and vice-versa |
| .close() | Closes the select |
| .open() | Opens the select |
``javascript
var select = new CustomSelect({
elem: 'select',
});
// open it for the user
select.open();
`
`
npm test
| Browser | Support | Dependencies |
| ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Chrome | yes | - |
| Firefox | yes | - |
| Safari | yes | - |
| Opera | yes | - |
| Edge | yes | - |
| IE | yes\* | Polyfill for .classList` in IE9, Polyfill for CustomEvent in IE9+ |
\* _IE9 and up_
This project uses SemVer for versioning. For the versions available, see the tags on this repository.
Anyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.
See Unlicense for full details.
- Vanilla JavaScript Carousel
- Vanilla JavaScript Tabs
- Vanilla JavaScript Tooltip
- Vanilla JavaScript Accordion