dselect

Dropdown select box for bootstrap 5.3.3

Demo

Features

• Placeholder
• Multiple (Tags)
• Search
• Creatable
• Clearable
• Sizing
• Validation
• Localization
• Images in dropdown menu

Installation

Install dselect with npm

npm i @skem9/dselect

Install from cdn

<linkrel="stylesheet" href="https://cdn.jsdelivr.net/gh/Yohn/dselect@latest/dist/css/dselect.min.css"><scriptsrc="https://cdn.jsdelivr.net/gh/Yohn/dselect@latest/dist/js/dselect.min.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 ''classTag: 'text-bg-dark bg-gradient',// a class to be added to the tag badgessearchPlaceholder: 'Search..',// when search: true the placeholder in input boxsearchExtraClass: '',// extra class to be added to the search inputnoResultsPlaceholder: 'No results found',// when search finds no resultsaddOptionPlaceholder: 'Press Enter to add <strong>[searched-term]</strong>',// when creatable: true the help text under the search boxitemClass: '',// an additional css class to be added to each item within the dropdown menu}dselect(document.querySelector('#dselect-example'),config)

HTML Attributes

Note

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

<selectclass="form-select" id="dselect-example"
data-dselect-size="sm"
data-dselect-search="true"
data-dselect-creatable="true"
data-dselect-clearable="true"
data-dselect-item-class=""
data-dselect-max-height="300px"
data-dselect-class-tag="text-bg-dark bg-gradient"
data-dselect-search-placeholder="Search.."
data-dselect-search-extra-class=""
data-dselect-no-results-placeholder="No results found"
data-dselect-add-option-placeholder="Press Enter to add new tag."><optionvalue="">Choose browser</option><optiondata-dselect-img="imgs/chrome.svg" value="chrome">Chrome</option><optiondata-dselect-img="imgs/firefox.svg" value="firefox">Firefox</option><optiondata-dselect-img="imgs/safari.svg" value="safari">Safari</option><optiondata-dselect-img="imgs/edge.svg" value="edge">Edge</option><optiondata-dselect-img="imgs/opera.svg" value="opera">Opera</option><optiondata-dselect-img="imgs/brave.svg" value="brave">Brave</option></select>

Events

Note

Attach event listeners to to the <select> id and it will work as expected.

constselect=document.document.getElementById('select-id')select.addEventListener('change',()=>{console.log(select.value)})// for multi select / tagsconstmultiple=document.querySelector('#example-multiple')multiple.addEventListener('change',()=>{constselectedValues=Array.from(multiple.selectedOptions).map((option)=>option.value);console.innerHTML=JSON.stringify(selectedValues);})