OBE:BS4 EXTENSIONS
Extended Bootstrap 4 classes, elements and components to add more definitive and design-orientated functionalities to any Bootstrap 4 project.
Dropdown Select
C O M P O N E N T - P L U G I N
These are examples of different custom dropdown select components. These use the Bootstrap 4 dropdown menu functionality, and some custom scripting allowing the component to visually simulate a select element by using a hidden form input element in place of a traditional select element. You can either use the default markup which instantiates the plugin automatically when using a '.dropdown-select' set of classes (perfect for using a dropdown select instead of a standard select.) Conversely, you can instantiate the plugin on your own component with your own classes, event names, selectors, and more. Using this method, you can also add/use multiple data attributes on each dropdown select option! ;)
Select An Option
⇣
Select An Option
Lorem ipsum dolar si amet
⇣
Select An Option
⇣
Option One
Option Two
Option Three
Option Four
Select An Option
⇣
Select An Option
⇣
Option One
$9.99
Option Two
$9.99
Option Three
$9.99
Option Four
$9.99
Option Five
$9.99
Select An Option
⇣
<div class="form-group">
<label>Custom Classes & Submittable:</label>
<div class="ddSelect btn-group w-100">
<div class="d-flex justify-content-between align-items-center border rounded w-100 p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="listbox">
<div class="ddSelect-target">
<div class="py-2 px-3">Select An Option</div>
</div>
<div class="py-2 px-3">⇣</div>
</div>
<div class="dropdown-menu py-0 w-100">
<div class="ddSelect-option py-2 px-3" data-value="One">Abstract One</div>
<div class="ddSelect-option py-2 px-3" data-value="Two">Abstract Two</div>
<div class="ddSelect-option py-2 px-3" data-value="Three">Abstract Three</div>
<div class="ddSelect-option py-2 px-3" data-value="Four">Abstract Four</div>
<div class="ddSelect-option py-2 px-3" data-value="Five">Abstract Five</div>
</div>
</div>
<input type="hidden" name="ddSelect-input" value="">
<small class="form-text text-muted">This implementation uses a custom instantiation of the plugin to allow for programatic customization.</small>
</div>
// jQuery initialization of the OBE:BS4 Dropdown Select Plugin
// (With options for matching any custom class/id requirements you may have)
$('.ddSelect').obeDropdownSelect({
formMode : true,
parentSelector : '.ddSelect',
optionSelector : '.ddSelect-option',
cloneTargetSelector : '.ddSelect-target',
dataAttributeString : 'value',
});
Select Option (2x Data)
⇣
<!-- Plugin/Customized Dropdown Select Markup Example -->
<div class="form-group">
<label>Plugin Dropdown Select:</label>
<div class="ddSel btn-group w-100">
<div class="d-flex justify-content-between align-items-center border rounded w-100 p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="listbox">
<div class="cloned-ddSel">
<div class="py-2 px-3">Select An Option</div>
</div>
<div class="py-2 px-3">⇣</div>
</div>
<div class="dropdown-menu py-0 w-100">
<div class="ddSel-opt py-2 px-3" data-value="One" data-number="1">Abstract One</div>
<div class="ddSel-opt py-2 px-3" data-value="Two" data-number="2">Abstract Two</div>
<div class="ddSel-opt py-2 px-3" data-value="Three" data-number="3">Abstract Three</div>
<div class="ddSel-opt py-2 px-3" data-value="Four" data-number="4">Abstract Four</div>
<div class="ddSel-opt py-2 px-3" data-value="Five" data-number="5">Abstract Five</div>
</div>
</div>
<small class="form-text text-muted">Plugin dropdown Select help text.</small>
</div>
// jQuery initialization of the OBE:BS4 Dropdown Select Plugin
// (With options for matching any custom class/id requirements you may have)
$('.ddSel').obeDropdownSelect({
formMode : false,
parentSelector : '.ddSel',
optionSelector : '.ddSel-opt',
cloneTargetSelector : '.cloned-ddSel',
dataAttributeString : 'value',
customEventString : 'ddSel.clicked'
});
// Custom event example (named in settings above)
// Access 2 (or more) data attributes from a single option selection
$('.ddSel').on( 'ddSel.clicked', '.ddSel-opt', function(event) {
let option = $(event.target);
let value = option.data('value');
let number = option.data('number');
console.log('Selected Option Value: ' + value);
console.log('Selected Option Number: ' + number);
});
// Complete List of OBE:BS4 Dropdown Select Options and Defaults
$('SELECTOR-FOR-DROPDOWN-SELECT-HERE').obeDropdownSelect({
formMode : true, // choices are true or false, where true will allow you to write the selected option value to a hidden input in the markup to submit via GET/POST, and where false avoids writing anything to an input entirely for UI interactions that don't need to be submitted to a server
parentSelector : '.dropdown-select', // the parent selector class for the dropdown component (NOTE: this should ideally be a child of a .form-group element)
optionSelector : '.dropdown-select-option', // the class selector for each dropdown select option
cloneTargetSelector : '.dropdown-select-target', // the class selector for the element that will receive a markup clone of the selected dropdown option
dataAttributeString : 'option-value', // the data attribute string value used on each .dropdown-select-option element (Sans the 'data-' prefix of course!)
hiddenInputSelector : 'input[type=hidden]', // selector to target the (usually hidden) input with the value of the selected option (for GET/POST submissions)
customEventString : 'dropdown.select.selected' // the string name of the custom event you'd want to listen for to extend the functionality based on a user's interaction
});