dselect

All Options and Default Value

All options can be set via data-deselect-* attributes, or via the javascript constructor. For the attributes to work correctly you have to convert camelCase to kabab-case

const element = document.querySelector('#select-element');
dselect(element, {
    search: false, // Toggle search feature. Default: false
    creatable: false, // Creatable selection. Default: false
    clearable: false, // Clearable selection. Default: false
    maxHeight: '360px', // Max height for showing scrollbar. Default: 360px
    size: '', // Can be "sm" or "lg". Default ''
    classTag: 'text-bg-dark bg-gradient', // a class to be added to the tag badges
    searchPlaceholder: 'Search..', // when search: true the placeholder in input box
    searchExtraClass: '', // extra class to be added to the search input
    noResultsPlaceholder: 'No results found', // when search finds no results
    addOptionPlaceholder: 'Press Enter to add "<strong>[searched-term]</strong>"', // when creatable: true the help text under the search box
    itemClass: '', // an additional css class to be added to each item within the dropdown menu
})
					

For the Image Prefixes

Add a data-dselect-img="/path/to/img.svg" to the <option> tag.

<select class="form-select" id="example-sizing-default">
	<option value="">Choose browser</option>
	<option data-dselect-img="example/imgs/chrome.svg" value="chrome">Chrome</option>
	<option data-dselect-img="example/imgs/firefox.svg" value="firefox">Firefox</option>
	<option data-dselect-img="example/imgs/safari.svg" value="safari">Safari</option>
	<option data-dselect-img="example/imgs/edge.svg" value="edge">Edge</option>
	<option data-dselect-img="example/imgs/opera.svg" value="opera">Opera</option>
	<option data-dselect-img="example/imgs/brave.svg" value="brave">Brave</option>
</select>