bootstrap-hardskilled-extend-select v1.2.2

Extended Select for Bootstrap 4 (analog 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-select

To 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>

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>

Hire us via Upwork! | Our website