Bootstrap 4 select下拉框功能扩展和美化jquery插件 Style And Enhance Select Elements With Bootstrap 4

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

Example usage:

<link rel="stylesheet" href="../select.min.css">
<script src="./select.min.js"></script>
<script>
    $('select').extendSelect();
</script>

Usage with options:

<link rel="stylesheet" href="../select.min.css">
<script src="./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>

Example:

<select id="basic" class="form-control">
    <option>Rabbit</option>
    <option>Cat</option>
    <option class="get-class" disabled>Owl</option>
    <optgroup label="Insects">
        <option>Spider</option>
        <option>Worm</option>
        <option>Fly</option>
    </optgroup>
</select>

To enable live search on select use the attribute:

data-live-search="true"

Example:

<select id="basic-live" class="form-control" data-live-search="true">
    <option>Rabbit</option>
    <option selected>Cat</option>
    <option class="get-class" disabled>Owl</option>
    <optgroup label="Insects">
        <option>Spider</option>
        <option>Worm</option>
        <option>Fly</option>
    </optgroup>
</select>

To enable multiple select use the attribute:

multiple

Example:

<select id="basic2" class="form-control" 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>

To enable multiple select use the attribute:

multiple

To enable max options error use the attribute:

data-max-options="2"

Example:

<select id="basic2" class="form-control" data-max-options="2" 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>

To enable multiple select use the attribute:

multiple

To enable max options error use the attribute:

data-max-options="2"

To customise error message use the attribute:

data-max-options-message="Max items"

Example:

<select id="basic2" class="form-control" data-max-options="2" data-max-options-message="Max items" 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>

To enable live search on select use the attribute:

data-live-search="true"

To enable multiple select use the attribute:

multiple

You can customise live search placeholder:

data-live-search-placeholder="Find"

Example:

<select multiple data-live-search="true" data-live-search-placeholder="Find">
    <optgroup label="filter1">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
    </optgroup>
    <optgroup label="filter2">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
    </optgroup>
    <optgroup label="filter3">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
    </optgroup>
</select>

To enable live search on select use the attribute:

data-live-search="true"

To hide disabled elements use the attribute:

data-hide-disabled="true"

Example:

<select id="first-disabled" data-hide-disabled="true" data-live-search="true">
    <optgroup disabled="disabled" label="disabled">
        <option>Hidden</option>
    </optgroup>
    <optgroup label="Fruit">
        <option>Apple</option>
        <option>Orange</option>
    </optgroup>
    <optgroup label="Vegetable">
        <option>Corn</option>
        <option>Carrot</option>
    </optgroup>
</select>

"Basic" (colored elements) btn-primary: btn-success: btn-info: btn-warning: btn-danger:

To customise button use the attribute:

data-btn-cla btn-blockss="btn-primary"

To default used class:

btn-secondary

Example:

<select id="basic" data-btn-class="btn-primary btn-block" cla btn-blockss="form-control">
    <option>Rabbit</option>
    <option>Cat</option>
    <option class="get-class" disabled>Owl</option>
    <optgroup label="Insects">
        <option>Spider</option>
        <option>Worm</option>
        <option selected>Fly</option>
    </optgroup>
</select>