webcito/bs-select-drop

Converts a select into a dropdown

dev-main 2024-02-19 07:31 UTC

Requires

• components/jquery: 3.6.0
• twbs/bootstrap: >=5.0.0

proprietary

• thomas

• jquery
• bootstrap
• select
• dropdown

README

Important

This package has been overhauled and has been revised here https://github.com/ThomasDev-de/bs-select

jquery-bsSelectDrop

Converts a select into a dropdown

table of contents

• Requirements
• Installation
• Usage
• Options
• Methods
• Events

Requirements

• bootstrap >=5.0
• jQuery 3.6

Installation

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

<script src="jquery.bsSelectDrop.js" type="text/javascript">

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

composer require webcito/bs-select-drop:dev-main

<script src="/vendor/webcito/bs-select-drop/dist/jquery.bsSelectDrop.js" type="text/javascript">

Set global defaults

// multiple options
$.bsSelectDrop.setDefaults(options);
// single option
$.bsSelectDrop.setDefault(prop, val);
// get default options
$.bsSelectDrop.getDefaults();

Usage

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

<!-- Simple selection -->
<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>

<script>
  $('select').bsSelectDrop();
</script>

option[data-attributes]

Options

Methods

Methods are called as follows

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

show

Opens the dropdown

$('select').bsSelectDrop('show');

hide

Closes the dropdown

$('select').bsSelectDrop('hide');

val

Changes the value of the select

$('select').bsSelectDrop('val', 1);

updateOptions

Changes the options of the dropdown.

$('select').bsSelectDrop('updateOptions', {
  buttonClass: 'btn btn-danger',
  ...
});

refresh

Rebuild the dropdown. This is useful if the options are changed via Javascript.

$('select').bsSelectDrop('refresh');

destroy

Deletes the dropdown and restores the original select.

$('select').bsSelectDrop('destroy'); 

Events