Multi-column Dropdown Select With jQuery And Bootstrap 5
File Size: | 12.3 KB |
---|---|
Views Total: | 2163 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

This is a nice and fancy multi-column dropdown select plugin built with jQuery and Bootstrap 5.
The multi-comlumn dropdown select will be displayed in a Bootstrap 5 modal window when triggered. Your users can enter a value or a search query which will filter values in all columns. After finishing a search, only matching values are displayed in the dropdown.
How to use it:
1. Load the needed jQuery library and Bootstrap 5 framework in the document.
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/cdn/bootstrap.min.js"></script>
2. Create a button to trigger the multi-column dropdown select.
<button type="button" id="btnLanguage" class="btn btn-primary"> Select a Language </button>
3. Create an input field to store the user selection.
<input type="text" id="selectedLanguage" class="form-control" placeholder="Language..." aria-label="Language">
4. Prepare your data (an array of objects) for the options.
const AVAILABLE_LANGUAGES = [ { code: "af", name: "Afrikaans"}, { code: "sq", name: "Albanian"}, { code: "ar", name: "Arabic"}, // ... ];
5. Initialize the plugin and populate the dropdown select with the data you just provided.
$( '#btnLanguage' ).bhDropdownSelect({ source: AVAILABLE_LANGUAGES, selectCallback: selectLanguage, }). // store the selected value in the input field function selectLanguage( params ) { $( '#selectedLanguage' ).val( `${params[0]}, ${params[1]}` ); };
6. Set the theme. Default: "safe".
$( '#btnLanguage' ).bhDropdownSelect({ source: AVAILABLE_LANGUAGES, selectCallback: selectLanguage, theme: 'eyesore' }).
7. Or create your own themes in the CSS.
.dropdown-select.mytheme .modal-header { background-color: #adbcce; } .dropdown-select.mytheme .modal-header input[type="text"] { background-color: #d5dce5; } .dropdown-select.mytheme .modal-body { background-color: #879ebc; } .dropdown-select.mytheme .modal-body .container .row:nth-child( odd ) { background-color: #9fc5f7; } .dropdown-select.mytheme .modal-body .container .row:nth-child( even ) { background-color: #3b87ec; } .dropdown-select.mytheme .item-highlight { background-color: #c1d8f5; font-style: italic; font-weight: bold; } .dropdown-select.mytheme .item-normal { font-style: normal; font-weight: normal; }
$( '#btnLanguage' ).bhDropdownSelect({ source: AVAILABLE_LANGUAGES, selectCallback: selectLanguage, theme: 'mytheme' }).
This awesome jQuery plugin is developed by behai-nguyen. For more Advanced Usages, please check the demo page or visit the official website.