@skem9/dselect
Version:
Dropdown select box for bootstrap 5 with search, multiple, tag and image support
512 lines (493 loc) • 23.1 kB
HTML
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="favicon.ico">
<!-- Bootstrap 5.3.3 is compiled via gulpfile.js so no need to include the cdn for that -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
<link rel="stylesheet" href="dist/css/dselect.css">
<title>dselect - Dropdown select box for bootstrap 5</title>
<style>
h5 {
color: var(--bs-primary-text-emphasis);
border-bottom: 1px solid var(--bs-primary-text-emphasis);
padding: var(--bs-border-radius);
text-align: center;
box-shadow: inset var(--bs-box-shadow-lg);
margin: 0 -.75rem .5rem;
border-top-left-radius: var(--bs-border-radius-sm);
border-top-right-radius: var(--bs-border-radius-sm);
}
.my-3 > div {
background: var(--bs-secondary-bg-subtle);
padding: 0 .75rem .75rem;
border-radius: var(--bs-border-radius-sm);
}
#ig-vals {
--bs-bg-opacity: .75;
background-color: rgba(var(--bs-link-hover-color-rgb),var(--bs-bg-opacity)) ;
border-radius: var(--bs-border-radius-sm);
color: var(--bs-dark);
}
</style>
</head>
<body class="bg-secondary-subtle">
<div class="container my-5">
<div class="row">
<div class="col-12 col-md-8 offset-md-2 col-lg-6 offset-lg-3 mb-3">
<div class="card">
<div class="card-header">
<div class="d-flex align-items-center gap-1">
<svg width="36" height="36" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#0d6efd">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<h1>dselect</h1>
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-primary bg-opacity-25">Dropdown select menu for bootstrap 5, with support for tags, multiple choices, searchable, images in list, clearable, small and large sizing, and compatibility with input groups.</li>
</ul>
<div class="list-group list-group-flush list-group-horizontal">
<div class="rounded-0 col-4 list-group-item list-group-item-primary border-bottom border-top-0" style="white-space: nowrap;">Updated By:</div>
<a href="https://github.com/Yohn/dselect" target="_blank"
class="rounded-0 list-group-item list-group-item-action list-group-item-secondary border-top-0 border-bottom">
<svg viewBox="0 0 24 24" width="21" height="21" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Yohn
</a>
</div>
<div class="list-group list-group-flush list-group-horizontal border-top-0">
<div class="rounded-0 col-4 list-group-item list-group-item-primary border-top-0 border-bottom" style="white-space: nowrap;">Originally By:</div>
<a href="https://github.com/jarstone/dselect" target="_blank"
class="rounded-0 list-group-item list-group-item-action list-group-item-secondary border-top-0 border-bottom">
<svg viewBox="0 0 24 24" width="21" height="21" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
Jarstone
</a>
</div>
<div class="card card-body border-0 shadow-sm">
<div class="my-3 d-flex flex-column gap-3">
<div>
<h5>Basic</h5>
<select class="form-select" id="example-basic">
<option value="chrome">Chrome</option>
<option value="firefox">Firefox</option>
<option value="safari">Safari</option>
<option value="edge">Edge</option>
<option value="opera">Opera</option>
<option value="brave">Brave</option>
</select>
</div>
<hr>
<div>
<h5>Advanced</h5>
<div class="input-group">
<label class="input-group-text" for="inputGroupSelect05">Favorite</label>
<select class="form-select" id="inputGroupSelect05" multiple>
<option value="">Favorite Browser</option>
<option data-dselect-img="example/imgs/chrome.svg" value="chrome">Chrome</option>
<option data-dselect-img="example/imgs/firefox.svg" value="firefox" selected>Firefox</option>
<option data-dselect-img="example/imgs/safari.svg" value="safari" selected>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>
<label class="input-group-text" for="inputGroupSelect05">Browser</label>
</div>
<div id="ig-vals" class="p-2 mt-2 text-center"></div>
</div>
<hr>
<div>
<h5>With placeholder</h5>
<select class="form-select" id="example-placeholder">
<option value="">Choose browser</option>
<option value="chrome">Chrome</option>
<option value="firefox">Firefox</option>
<option value="safari">Safari</option>
<option value="edge">Edge</option>
<option value="opera">Opera</option>
<option value="brave">Brave</option>
</select>
</div>
<hr>
<div>
<h5>Multiple</h5>
<select class="form-select" id="example-multiple" multiple>
<option value="">Choose browser</option>
<option value="chrome">Chrome</option>
<option value="firefox" selected>Firefox</option>
<option value="safari">Safari</option>
<option value="edge">Edge</option>
<option value="opera">Opera</option>
<option value="brave">Brave</option>
</select>
</div>
<hr>
<div>
<h5>Search</h5>
<select class="form-select" id="example-search">
<option value="">Choose browser</option>
<option value="chrome">Chrome</option>
<option value="firefox">Firefox</option>
<option value="safari">Safari</option>
<option value="edge">Edge</option>
<option value="opera">Opera</option>
<option value="brave">Brave</option>
</select>
</div>
<hr>
<div>
<h5>With Images</h5>
<select class="form-select" id="example-imgs">
<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>
</div>
<hr>
<div>
<h5>Search w/ Placeolders</h5>
<select class="form-select"
data-dselect-search-placeholder="Search me homie!"
data-dselect-no-results-placeholder="Nothing here yo"
id="example-search-placehodlers">
<option value="">Choose browser</option>
<option value="chrome">Chrome</option>
<option value="firefox">Firefox</option>
<option value="safari">Safari</option>
<option value="edge">Edge</option>
<option value="opera">Opera</option>
<option value="brave">Brave</option>
</select>
</div>
<hr>
<div>
<h5>Creatable</h5>
<select class="form-select" id="example-creatable">
<option value="">Choose or add browser</option>
<option value="chrome">Chrome</option>
<option value="firefox">Firefox</option>
<option value="safari">Safari</option>
<option value="edge">Edge</option>
<option value="opera">Opera</option>
<option value="brave">Brave</option>
</select>
</div>
<hr>
<div>
<h5>Clearable</h5>
<select class="form-select" id="example-clearable">
<option value="">Choose browser</option>
<option value="chrome" selected>Chrome</option>
<option value="firefox">Firefox</option>
<option value="safari">Safari</option>
<option value="edge">Edge</option>
<option value="opera">Opera</option>
<option value="brave">Brave</option>
</select>
</div>
<hr>
<div>
<h5>Optgroup</h5>
<select class="form-select" id="example-optgroup" multiple>
<option value="">Choose browser</option>
<optgroup label="Common Browsers">
<option value="chrome" selected>Chrome</option>
<option value="firefox">Firefox</option>
<option value="safari">Safari</option>
<option value="edge">Edge</option>
<option value="opera">Opera</option>
</optgroup>
<optgroup label="Common Browsers">
<option value="brave">Brave</option>
<option value="Waterfod">Waterfox</option>
<option value="PaleMoon">PaleMoon</option>
</optgroup>
</select>
</div>
<hr>
<div class="d-flex flex-column gap-1">
<h5>Sizing</h5>
<select class="form-select" id="example-sizing-sm">
<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>
<select class="form-select my-2" 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>
<select class="form-select" id="example-sizing-lg">
<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>
</div>
<hr>
<div>
<h5>Validation</h5>
<form class="needs-validation d-flex flex-column gap-3" novalidate action="javascript:void(0);">
<div>
<select class="form-select dselect" data-dselect-search="true" data-dselect-class-tag="bg-warning-subtle bg-bg-gradient" required multiple>
<option value="">Choose browser</option>
<option value="chrome">Chrome</option>
<option value="firefox" selected>Firefox</option>
<option value="safari">Safari</option>
<option value="edge">Edge</option>
<option value="opera">Opera</option>
<option value="brave">Brave</option>
</select>
<div class="invalid-feedback">This field is required.</div>
<div class="valid-feedback">Good choice.</div>
</div>
<div>
<div class="input-group has-validation">
<label class="input-group-text" for="inputGroupSelect16">Browsers</label>
<select class="form-select dselect" id="inputGroupSelect16" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">This field is required.</div>
<div class="valid-feedback">Good choice.</div>
</div>
</div>
<div>
<div class="input-group has-validation">
<select class="form-select dselect" id="inputGroupSelect12">
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label class="input-group-text" for="inputGroupSelect02">Options</label>
<div class="invalid-feedback">This field is required.</div>
<div class="valid-feedback">Good choice.</div>
</div>
</div>
<div>
<div class="input-group has-validation">
<select class="form-select dselect" id="inputGroupSelect13">
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label class="input-group-text" for="inputGroupSelect14">Options</label>
<select class="form-select dselect" id="inputGroupSelect14">
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">This field is required.</div>
<div class="valid-feedback">Good choice.</div>
</div>
</div>
<div>
<select class="form-select dselect" multiple required>
<option value="">Choose...</option>
<option value="chrome">Chrome</option>
<option value="firefox">Firefox</option>
<option value="safari">Safari</option>
<option value="edge">Edge</option>
<option value="opera">Opera</option>
<option value="brave">Brave</option>
</select>
<div class="invalid-feedback">This field is required.</div>
<div class="valid-feedback">Good choice.</div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
<hr>
<div>
<h5>Input Groups</h5>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group mb-3">
<select class="form-select" id="inputGroupSelect02">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label class="input-group-text" for="inputGroupSelect02">Options</label>
</div>
<div class="input-group mb-3">
<select class="form-select" id="inputGroupSelect03">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label class="input-group-text" for="inputGroupSelect04">Options</label>
<select class="form-select" id="inputGroupSelect04">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="alert alert-secondary">
<h2 class="border-bottom border-1 border-primary-subtle">
All Options and Default Value
</h2>
<p class="bg-dark-subtle p-2 pt-1">All options can be set via <code>data-deselect-*</code> attributes, or via the javascript constructor. For the attributes to work correctly you have to convert <code>camelCase</code> to <code>kabab-case</code></p>
<pre><code class="language-javascript">
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
})
</code></pre>
<hr>
<h2 class="border-bottom border-1 border-primary-subtle">
For the Image Prefixes
</h2>
<p class="bg-dark-subtle p-2 pt-1">Add a <code>data-dselect-img="/path/to/img.svg"</code> to the <code><option></code> tag.</p>
<pre><code class="language-html">
<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></code></pre>
</div>
</div>
</div>
</div>
<script src="//cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js" crossorigin="anonymous"></script>
<script src="dist/js/dselect.js"></script>
<script>
const multiOpts = document.querySelector('#inputGroupSelect05')
// input-group
dselect(document.querySelector('#inputGroupSelect01'))
dselect(document.querySelector('#inputGroupSelect02'))
dselect(document.querySelector('#inputGroupSelect03'))
dselect(document.querySelector('#inputGroupSelect04'))
dselect(multiOpts, {
search: true, // search items
creatable: true, // allow to create new elements
clearable: true, // to remove the selection
maxHeight: '360px', // height of the dropdown menu
size: '', // 'sm' or 'lg' according to
classTag: 'text-bg-primary bg-gradient', // a class to be added to the tag badges
searchPlaceholder: 'Favorite Framework', // when search: true the placeholder in input box
noResultsPlaceholder: 'No results found', // when search finds no results
itemClass: 'active', // an additional css class to be added to each item within the dropdown menu
})
const showVals = document.getElementById('ig-vals')
// for multi select / tags
multiOpts.addEventListener('change', () => {
const selectedValues = Array.from(multiOpts.selectedOptions).map((option) => option.value);
showVals.innerHTML = JSON.stringify(selectedValues);
})
const event = new Event('change', { bubbles: true });
// Dispatch the event
multiOpts.dispatchEvent(event);
// basic
dselect(document.querySelector('#example-basic'))
// placeholder
dselect(document.querySelector('#example-placeholder'))
// multiple
dselect(document.querySelector('#example-multiple'))
// search
dselect(document.querySelector('#example-imgs'), {
search: true,
})
dselect(document.querySelector('#example-search'), {
search: true
})
dselect(document.querySelector('#example-search-placehodlers'), {
search: true
})
// creatable
dselect(document.querySelector('#example-creatable'), {
search: true,
creatable: true
})
// clearable
dselect(document.querySelector('#example-clearable'), {
clearable: true
})
dselect(document.querySelector('#example-optgroup'), {
search: true,
classTag: 'bg-danger-subtle'
})
// Sizing
dselect(document.querySelector('#example-sizing-sm'), {
size: 'sm'
})
dselect(document.querySelector('#example-sizing-default'))
dselect(document.querySelector('#example-sizing-lg'), {
size: 'lg'
})
// Validation
// Enable dselect on all '.dselect'
for (const el of document.querySelectorAll('.dselect')) {
dselect(el)
}
// Example starter JavaScript for disabling form submissions if there are invalid fields
void (function() {
document.querySelectorAll('.needs-validation').forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
})
})
/* syntax highlighting */
hljs.highlightAll();
})()
</script>
</body>
</html>