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.

table of contents

• Requirements
• Installation
• Usage
• Locales
• 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">

or use the GitHub CDN (jsDelivr):

<script src="https://cdn.jsdelivr.net/gh/ThomasDev-de/bs-select@2.1.38/dist/locale/de-DE.min.js" type="text/javascript"></script> <!-- optional -->
<script src="https://cdn.jsdelivr.net/gh/ThomasDev-de/bs-select@2.1.38/dist/jquery.bs-select.min.js" type="text/javascript"></script>

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>

Locales

Locale files are optional and set the global window.bsSelectTranslations object. Include one locale file before jquery.bs-select.js.

Available locale files:

cs-CZ, da-DK, de-DE, el-GR, en-GB, en-US, es-ES, fi-FI, fr-FR, hu-HU, it-IT, nb-NO, nl-NL, pl-PL, pt-PT, ro-RO, sk-SK, sv-SE.

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:

• GitHub Documentation
• Bootstrap Select Examples

Support this project

If this project helps you, feel free to support its development:

☕ Buy me a coffee via PayPal