Advanced Dropdown Select Plugin For Bootstrap 5 - jQuery bsSelectDrop

File Size: 6.24 KB
Views Total: 125
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Advanced Dropdown Select Plugin For Bootstrap 5 - jQuery bsSelectDrop

A simple plain jQuery plugin that converts a Bootstrap 5 select into a custom dropdown component with search and filter capabilities. 

More Features:

  • Dark mode.
  • Custom dropdown positions.
  • Supports both Single and Multiple select.
  • Custom html at the beginning and end of the dropdown.
  • Simple yet useful APIs.

See Also:

How to use it:

1. Load the needed jQuery library and Bootstrap 5 framework.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2. Download and load the bsSelectDrop plugin after jQuery.

<script src="jquery.bsSelectDrop.js"></script>

3. Call the function on the select and the plugin will do the rest.

<select id="country" name="country" multiple>
  <option value="Albania">Albania</option>
  <option value="Algeria">Algeria</option>
  <option value="American Samoa">American Samoa</option>
  <option value="Andorra">Andorra</option>
  <option value="Angola">Angola</option>
  <option value="Anguilla">Anguilla</option>
  ...
</select>
$('select').bsSelectDrop({
  // options here
});

4. Customize the dropdown button.

$('select').bsSelectDrop({
  btnWidth: 'fit-content',
  btnEmptyText: 'Select An Option...',
  btnClass: 'btn btn-outline-secondary',
});

5. Enable the dark menu mode.

$('select').bsSelectDrop({
  darkMenu: true,
});

6. Enable/disable the search/filter feature. Default: true.

$('select').bsSelectDrop({
  search: true,
});

7. Append custom HTML content to the dropdown.

$('select').bsSelectDrop({
  menuPreHtml: '<b>jQueryScript</b>',
  menuAppendHtml: '<b>End</b>',
});

8. Set the position the dropdown should appear relative the trigger button.

$('select').bsSelectDrop({
  dropUp: false,
  dropStart: false,
  dropEnd: false,
  dropCenter: false,
});

9. API methods.

// get the value
$('select').bsSelectDrop('val', 1);

// update options
$('select').bsSelectDrop('updateOptions', {
  // options here
});

// refresh the dropdown
$('select').bsSelectDrop('refresh');

// destroy the dropdown
$('select').bsSelectDrop('destroy');

 


This awesome jQuery plugin is developed by ThomasDev-de. For more Advanced Usages, please check the demo page or visit the official website.