@dimsog/dropdownselect

A simple and lightweight javascript select without dependencies

Usage no npm install needed!

<script type="module">
  import dimsogDropdownselect from 'https://cdn.skypack.dev/@dimsog/dropdownselect';
</script>

README

DropdownSelect

A simple and lightweight javascript select without dependencies

Demo

Install

npm i @dimsog/dropdownselect

Usage

HTML

<select id="select">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3" selected>Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>

SCSS and JavaScript

@import '~@dimsog/dropdownselect/src/scss/dropdownselect';
import DropdownSelect from '@dimsog/dropdownselect';
new DropdownSelect("#select");

Or

<link href="/dist/dropdownselect.css" rel="stylesheet">
<script src="/dist/dropdownselect.js"></script>

<script>
    new DropdownSelect("#select");
</script>

Multiple instances

<select class="select"></select>
<select class="select"></select>
<select class="select"></select>
<select class="select"></select>
DropdownSelect.fromElements('.select');
// or
DropdownSelect.fromElements(document.querySelectorAll('.select'));

Full demo

const select = new DropdownSelect('#selector', {
    on: {
        change(value, option, instance) {
            // use "instance" or "this" for access to current instance
            alert('Selected value: ' + value)
        }
    }
});