dselect

Dropdown select box for bootstrap 5

Demo

Features

• Placeholder
• Multiple
• Search
• Creatable
• Clearable
• Sizing
• Validation

Installation

Install dselect with npm

npm install @jarstone/dselect

Install from cdn

<linkrel="stylesheet" href="https://unpkg.com/@jarstone/dselect/dist/css/dselect.css"><scriptsrc="https://unpkg.com/@jarstone/dselect/dist/js/dselect.js"></script>

Usage/Examples

<selectclass="form-select" id="dselect-example"><optionvalue="chrome">Chrome</option><optionvalue="firefox">Firefox</option><optionvalue="safari">Safari</option><optionvalue="edge">Edge</option><optionvalue="opera">Opera</option><optionvalue="brave">Brave</option></select>

dselect(document.querySelector('#dselect-example'))

Options

constconfig={search: false,// Toggle search feature. Default: falsecreatable: false,// Creatable selection. Default: falseclearable: false,// Clearable selection. Default: falsemaxHeight: '360px',// Max height for showing scrollbar. Default: 360pxsize: '',// Can be "sm" or "lg". Default ''}dselect(document.querySelector('#dselect-example'),config)

options can also be set in "data-dselect-*" attribute

<selectdata-dselect-search="true" data-dselect-creatable="true" data-dselect-clearable="true" data-dselect-max-height="300px" data-dselect-size="sm" class="form-select" id="dselect-example">
...
</select>