PHPackages                             webcito/bs-select-drop - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. webcito/bs-select-drop

ActiveLibrary[Utility & Helpers](/categories/utility)

webcito/bs-select-drop
======================

Converts a select into a dropdown

4262[1 issues](https://github.com/ThomasDev-de/jquery-bs-select-2-dropdown/issues)

Since Feb 19Pushed 2y ago2 watchersCompare

[ Source](https://github.com/ThomasDev-de/jquery-bs-select-2-dropdown)[ Packagist](https://packagist.org/packages/webcito/bs-select-drop)[ RSS](/packages/webcito-bs-select-drop/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Important

This package has been overhauled and has been revised here

jquery-bsSelectDrop
===================

[](#jquery-bsselectdrop)

Converts a select into a dropdown

### table of contents

[](#table-of-contents)

- [Requirements](#requirements)
- [Installation](#installation)
- [Usage](#usage)
- [Options](#options)
- [Methods](#methods)
- [Events](#events)

### Requirements

[](#requirements)

- bootstrap >=5.0
- jQuery 3.6
-

### Installation

[](#installation)

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

```

```

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

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

```

```

### Set global defaults

[](#set-global-defaults)

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

### Usage

[](#usage)

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

```

  Deutschland
  Polen
  ...

  Berlin rocks
  New York
  ...

        Berlin
        Munich

        New York
        San Francisco

        Barcelona
        Madrid

    ...

  $('select').bsSelectDrop();

```

### option\[data-attributes\]

[](#optiondata-attributes)

data-attributeexampledescriptiondata-subtext`Berlin`Adds a small additional text sectiondata-icon`Berlin`Adds an icon in front of the option. (e.g. a class from FontAwesome)### Options

[](#options)

propertytypedefaultdescbtnWidth`string``fit-content`*the css width of the dropdown button*btnEmptyText`string``Please select..`*The text at no selection*btnClass`string``btn btn-outline-secondary`*The classes assigned to the dropdown button*dropUp`bool``false`*shows the menu above*dropStart`bool``false`*shows the menu on the left*dropEnd`bool``false`*shows the menu on the right*dropCenter`bool``false`*shows the menu centered*dropHeaderClass`string``secondary`*If option groups are present, the background class of the heading is set here.*search`bool``true`*adds a search function to the menu*darkMenu`bool``false`*shows the menu in darkstyle*menuPreHtml`null/string``null`*shows a text in the menu before the selection*menuAppendHtml`null/string``null`*shows the text in the menu after the selection*showSubtext`bool``true`*If this option is true, options have the data attribute data-subtext, the subtext will be displayed in the dropdown.*showActionMenu`bool``true`*If it is a multiple selection and this option is true, two buttons are displayed above the selection for faster selection.*showSelectionAsList`bool``true`*If it is a multiple selection, all selections should be listed below each other. If the value is false, it will show how much was selected.*showSelectedText`function``(selectedItems, totalItems) => {}`*If it is a multiple selection and the selected elements are greater than 1, this function is called. This function is ignored if the showSelectionAsList option is true.*deselectAllText`string``Deselect All`*If showActionMenu is true, the language of the two buttons can be set here.*selectAllText`string``Select All`*If showActionMenu is true, the language of the two buttons can be set here.*dropDownListHeight`number``300`*Height of the dropdown list.*selectIconClass`string```*Class used to style the select icon.*selectIcon`string```*Icon used for selection (i.e  )*debug`bool``false`*If true then outputs debug messages to the console.*dropDownItemClass`string```*Class used to stype the drop-down item. Add and .active style to override the Bootstrap active styling*searchPlaceholder`string``Search..`"Placeholder for search input box\*### Methods

[](#methods)

Methods are called as follows

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

#### show

[](#show)

Opens the dropdown

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

#### hide

[](#hide)

Closes the dropdown

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

#### val

[](#val)

Changes the value of the select

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

#### updateOptions

[](#updateoptions)

Changes the options of the dropdown.

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

#### refresh

[](#refresh)

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

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

#### destroy

[](#destroy)

Deletes the dropdown and restores the original select.

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

### Events

[](#events)

event typeDescriptionhide.bs.selectFires immediately when the hide instance method has been called.hidden.bs.selectFired when the dropdown has finished being hidden from the user and CSS transitions have completed.show.bs.selectFires immediately when the show instance method is called.shown.bs.selectFired when the dropdown has been made visible to the user and CSS transitions have completed.refresh.bs.selectFires when the `refresh` method has been invoked.change.bs.selectFires when the method `val` has been called.update.bs.selectFires when the method `updateOptions` was called.destroy.bs.selectFires when the `destroy` method has been activated.

###  Health Score

15

—

LowBetter than 3% of packages

Maintenance15

Infrequent updates — may be unmaintained

Popularity12

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity19

Early-stage or recently created project

 Bus Factor1

Top contributor holds 98% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/6d5f10c16b4b6bd1ac531ffc39c23c569490ec4630829511692c03ec89d36a11?d=identicon)[thomasK81](/maintainers/thomasK81)

---

Top Contributors

[![ThomasDev-de](https://avatars.githubusercontent.com/u/67106837?v=4)](https://github.com/ThomasDev-de "ThomasDev-de (50 commits)")[![GregObleshchuk](https://avatars.githubusercontent.com/u/18275698?v=4)](https://github.com/GregObleshchuk "GregObleshchuk (1 commits)")

### Embed Badge

![Health badge](/badges/webcito-bs-select-drop/health.svg)

```
[![Health](https://phpackages.com/badges/webcito-bs-select-drop/health.svg)](https://phpackages.com/packages/webcito-bs-select-drop)
```

###  Alternatives

[zhuqipeng/laravel-hprose

Hprose for Laravel

605.8k1](/packages/zhuqipeng-laravel-hprose)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)