Extended Select for Bootstrap 4 (alternative bootstrap-select)
Demo and documentation
You can require bootstrap plugin via cdn or download the archive with release and unzip into assets directory.
For install via npm, use command:
npm i --save bootstrap-hardskilled-extend-selectTo use CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-hardskilled-extend-select@latest/css/select.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap-hardskilled-extend-select@latest/js/select.min.js"></script>Example usage:
<link rel="stylesheet" href="css/select.min.css"> <script src="js/select.min.js"></script> <script> $('select').extendSelect(); </script>Usage with options:
<link rel="stylesheet" href="css/select.min.css"> <script src="js/select.min.js"></script> <script> $('select').extendSelect({ // Search input placeholder: search: 'Find', // Title if option not selected: notSelectedTitle: 'Pls select', // Message if select list empty: empty: 'Empty', // Class to active element: activeClass: 'active', // Class to disabled element: disabledClass: 'disabled', // Custom error message for all selects (use placeholder %items): maxOptionMessage: 'Max %items elements', // Delay to hide message maxOptionMessageDelay: 2000, // Popover logic (resize or save height): popoverResize: true, // Auto resize dropdown by button width: dropdownResize: true }); </script>| Key | Description | Default value |
|---|---|---|
| search | Search input placeholder | Search |
| notSelectedTitle | Title if option not selected | Nothing to shown |
| empty | Message if select list empty | Nothing to shown |
| activeClass | Class to active element | active |
| disabledClass | Class to disabled element | diabled |
| maxOptionMessage | Custom error message for all selects (use placeholder %items) | Limit reached (%items items max) |
| maxOptionMessageDelay | Delay to hide message | 2000 |
| popoverResize | Popover logic (resize or save height) | false |
| dropdownResize | Auto resize dropdown by button width | false |
To listen changes use .on('change') event:
$('select#basic').on('change', function () { const selected = $(this).find(':selected').text(); $('#basicResult').text('Selected: ' + selected) })HTML attributes to select:
<select id="extendedSelect" class="form-control" data-live-search="true" data-max-options="2" data-max-options-message="Max items" data-live-search-placeholder="Find" data-hide-disabled="true" data-btn-class="btn-danger btn-block" data-input-group="true" data-not-selected="Select is empty" data-empty="Items not found" data-type="checkbox" multiple > <option selected>Rabbit</option> <option>Cat</option> <option class="get-class" disabled>Owl</option> <optgroup label="test" data-subtext="another test"> <option>Spider</option> <option selected>Worm</option> <option>Fly</option> </optgroup> </select>| Attribute | Description | Default value |
|---|---|---|
| data-live-search | Live search | false |
| data-max-options | Max selected options | Nothing to shown |
| data-max-options-message | Message if select limit overflow | Limit reached (%items items max) |
| data-live-search-placeholder | Search input placeholder | Search |
| data-hide-disabled | Hide disabled elements | false |
| data-btn-class | Button class for dropdown | btn-secondary |
| data-not-selected | Title if option not selected | Nothing to shown |
| data-empty | Message if select list empty | Nothing to shown |
| data-type | Custom select type (ex. checkbox) | null |
| multiple | Enable multiple selections | false |
