README

$.fn.bsSelect

This jQuery plugin enhances standard <select> elements by converting them into fully-featured Bootstrap dropdown components. It provides a wide range of customization options, methods, and event hooks for seamless integration and extended functionality. The plugin is built using jQuery 3.6, Bootstrap 5.3, and Bootstrap Icons, ensuring compatibility and modern design standards.

Requirements
Installation
Usage
Options
Methods
Events

Requirements

bootstrap 4 or 5
jQuery

Installation

Download and include the script at the end of the body tag.

<!--suppress ALL -->
<script src="dist/locale/de-DE.min.js" type="text/javascript"><!-- optional -->
<script src="dist/jquery.bs-select.js" type="text/javascript">

or install with composer and include the script at the end of the body tag.

composer require webcito/bs-select

<!--suppress ALL -->
<script src="/vendor/webcito/bs-select/dist/locale/de-DE.min.js" type="text/javascript"> <!-- optional -->
<script src="/vendor/webcito/bs-select/dist/jquery.bs-select.min.js" type="text/javascript">

Set global defaults

// multiple options
$.bsSelect.setDefaults(options);
// get default options
$.bsSelect.getDefaults();

Usage

All selects with the attribute [data-bs-toggle="select"] or [data-toggle="select"] are initialized automatically.

<!-- Simple selection -->
<!--suppress ALL -->
<select name="countries">
    <option value="Germany">Deutschland</option>
    <option value="Poland">Polen</option>
    ...
</select>

<!-- Or multiSelection -->
<select name="cities" multiple>
    <option value="1">Berlin rocks</option>
    <option value="2">New York</option>
    ...
</select>

<!-- Or with option groups -->
<select name="cities2" multiple>
    <optgroup label="Germany">
        <option value="1">Berlin</option>
        <option value="2">Munich</option>
    </optgroup>
    <optgroup label="USA">
        <option value="3">New York</option>
        <option value="4">San Francisco</option>
    </optgroup>
    <optgroup label="Spain">
        <option value="5">Barcelona</option>
        <option value="6">Madrid</option>
    </optgroup>
    ...
</select>
<!-- load jQuery and Bootstrap before -->
<script src="dist/jquery.bs-select.js" type="text/javascript">
    <script>
        $('select').bsSelect();
</script>

option[data-attributes]

Options

Methods

Methods are called as follows

$('select').bsSelect('method', param);

Events

Conclusion

The bs-select plugin is a feature-rich solution for enhancing <select> elements to work with Bootstrap styling and interactivity.

For further queries or issues, check:

webcito / bs-select

Maintainers

Details