@jthomae1/dselect
Version:
Dropdown select box for bootstrap 5.3
252 lines (227 loc) • 9.75 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/dselect.css">
<title>dselect - Dropdown select box for bootstrap 5</title>
</head>
<body class="bg-light">
<div class="container my-5" style="max-width: calc(360px + 1rem)">
<div class="card card-body border-0 shadow-sm">
<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>
<p class="text-secondary">Dropdown select box for bootstrap 5</p>
<p>
<a href="https://github.com/jarstone/dselect" target="_blank" class="link-secondary text-decoration-none d-flex align-items-center gap-1">
<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>
Github
</a>
</p>
<div style="max-width: 360px" class="my-4 d-flex flex-column gap-5">
<div>
<h6>Basic</h6>
<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>
<div>
<h6>With placeholder</h6>
<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>
<div>
<h6>Multiple</h6>
<select class="form-select" id="example-multiple" multiple>
<option value="">Choose browser</option>
<option value="chrome" selected>Chrome</option>
<option value="firefox" selected>Firefox</option>
<option value="safari" selected>Safari</option>
<option value="edge">Edge</option>
<option value="opera">Opera</option>
<option value="brave">Brave</option>
</select>
</div>
<div>
<h6>Search</h6>
<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>
<div>
<h6>Creatable</h6>
<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>
</select>
</div>
<div>
<h6>Creatable & Multiple</h6>
<select class="form-select" id="example-creatable-multiple" multiple>
<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>
<div>
<h6>Clearable</h6>
<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>
<div class="d-flex flex-column gap-1">
<h6>Sizing</h6>
<select class="form-select" id="example-sizing-sm">
<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>
<select class="form-select" id="example-sizing-default">
<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>
<select class="form-select" id="example-sizing-lg">
<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>
<div>
<h6>Validation</h6>
<form class="needs-validation d-flex flex-column gap-3" novalidate>
<div>
<select class="form-select dselect" data-dselect-clearable="true" required>
<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 class="invalid-feedback">This field is required.</div>
<div class="valid-feedback">Good choice.</div>
</div>
<div>
<select class="form-select dselect" multiple required>
<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 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>
</div>
</div>
</div>
<script src="https://unpkg.com/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/dselect.js"></script>
<script>
// basic
dselect(document.querySelector('#example-basic'))
// placeholder
dselect(document.querySelector('#example-placeholder'))
// multiple
dselect(document.querySelector('#example-multiple'))
// search
dselect(document.querySelector('#example-search'), {
search: true
})
// creatable
dselect(document.querySelector('#example-creatable'), {
search: true,
creatable: true
})
// creatable & multiple
dselect(document.querySelector('#example-creatable-multiple'), {
search: true,
creatable: true
})
// clearable
dselect(document.querySelector('#example-clearable'), {
clearable: true
})
// 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')
})
})
})()
</script>
</body>
</html>