Style And Enhance Select Elements With Bootstrap 4 - extendSelect

File Size: 19.8 KB
Views Total: 6025
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Style And Enhance Select Elements With Bootstrap 4 - extendSelect

Yet another jQuery plugin which makes use of Bootstrap 4 dropdown component to style and add extra functionalities (e.g. live search, max selection) to the regular select box. Also supports multiple select and option groups.

Alternative plugin:

How to use it:

1. Import the necessary Bootstrap 4 files into the html file.

<!-- Stylesheet -->
<link rel="stylesheet" href="" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<!-- JavaScript -->
<script src="" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

2. Import the Bootstrap 4 select plugin's files:

<!-- Stylesheet -->
<link rel="stylesheet" href="css/select.css">
<!-- JavaScript -->
<script src="src/select.js"></script>

3. Initialize the plugin on the existing select element and done.

<select class="form-control">
  <option selected>Swift</option>
  <option disabled>Java</option>
  <optgroup label="JavaScript">

4. Add the live search functionality to the dropdown select.

<select class="form-control" 
  <!-- Options here -->

5. Limit the number of options allowed to select.

<select class="form-control" 
        data-max-options-message="Max items"
  <!-- Options here -->

6. Override the default styles of the the dropdown button.

<select class="form-control" 
  <!-- Options here -->

7. If you want to hide the disabled options.

<select class="form-control" 
  <!-- Options here -->

8. Full plugin settings with default values.

  search: 'Search',
  notSelectedTitle: 'Nothing to shown',
  empty: 'Nothing to shown',
  activeClass: 'active',
  disabledClass: 'disabled',
  maxOptionMessage: 'Limit reached (%items items max)',
  maxOptionMessageDelay: 2000,
  popoverResize: false,
  dropdownResize: false

Change log:


  • Adding checkmark to selected item(s)


  • Add personal data options to select "data-not-selected" and "data-empty"


  • Fixed: Change Event is not triggered on native select
  • Fix open dropdown into input-group

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