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, // search items
	creatable: false, // allow to create new elements
	clearable: false, // to remove the selection
	maxHeight: '360px', // height of the dropdown menu
	size: '', // 'sm' or 'lg' according to
	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
	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>