PHPackages                             webapper/droplect-js - 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. webapper/droplect-js

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

webapper/droplect-js
====================

Droplect.js - Bootstrap 3 dropdown-select component

06JavaScript

Since Feb 3Pushed 9y ago1 watchersCompare

[ Source](https://github.com/Webapper/droplect-js)[ Packagist](https://packagist.org/packages/webapper/droplect-js)[ RSS](/packages/webapper-droplect-js/feed)WikiDiscussions master Synced 2mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Droplect.js - Bootstrap 3 dropdown-select component
===================================================

[](#droplectjs---bootstrap-3-dropdown-select-component)

Personally, I created this plugin as pure as possible to replace HTML `` inputs in dropdown mode by Bootstrap 3 dropdown component in order to keep select's simplicity combined with formatting features of BS dropdown.

Features:

- It mimics a `` element which can be formatted all the way you could need, isn't fantastic enough? :D
- Ok, it supports keyboard-navigation: up, down, home, end, enter, and escape!
- Ok, ok, so it also supports type-ahead item search at 350ms of typing speed!

Table of Contents
-----------------

[](#table-of-contents)

- [Installation](#installation)
- [Usage](#usage)
    - [Single-selection mode](#single-selection-mode)
    - [Multiple-selection mode](#multiple-selection-mode)
    - [Events to be observed](#events-to-be-observed)
    - [Living Samples of Use](#living-samples-of-use)
        - [Demo for Basic Use](#demo-for-basic-use)
        - [Pre-selected State](#pre-selected-state)
- [Legal info](#legal-info)

Installation
------------

[](#installation)

You can just download the latest version from its GitHub repository at  or using composer:

```
composer require webapper/droplect-js

```

Ensure the files will be placed into your project's www document-root where remote user agents can access it!

---

Usage
-----

[](#usage)

You should include the JS and CSS files in your HTML ***after*** the place of where you included jQuery and Bootstrap:

```

```

> **notice**: *you can customize the user-interface of droplect by customizing the basic BS3 dropdown component and/or overriding our basic droplect.css.*

### Single-selection mode

[](#single-selection-mode)

Droplect extends BS3 dropdowns by its new toggle mode `droplect` and it can map the selected value into an existing `` by ID using `data-map-to` setting, the droplect will copy the selected item's value of `data-value` attribute (see `` tags):

```

         Droplect trigger

         Action
         Another action
         Something else here

         Separated link

```

As long as it's a part of a `` which can be sent, the droplect's value in our sample can be accessed by accessing the `my-no-more-selects` POST/GET request parameter.

### Multiple-selection mode

[](#multiple-selection-mode)

If you want to use a droplect in multi-selection mode you just need to add `data-multiple="multiple"` attribute setting into its button and leave it without any `data-map-to` as of multiple selection mapping should be managed by your hand, using an HTML solution to keep better consistency and flexibility of your markup.

In this sample code below we use checkbox inputs, you probably noticed that all the `data-value` attributes are used regardless the use of `value` attributes of `` tags.

```

    Combine my options!

        Choose something
        Action
        Another action
        Something else here

        Separated link

```

### Events to be observed

[](#events-to-be-observed)

You can listen a toggled DOM element for events when they triggered eg. by using

```
$('[data-toggle="droplect"]').on(...)
```

Events supported by Droplect.js are:

- `hide.bs.droplect` will be triggered when droplects going to be hidden (thus, **before** of dropdown menu hide),
- `hidden.bs.droplect` will be triggered when droplects are hidden from now on (so **after** of dropdown menu hide),
- `show.bs.droplect` will be triggered when droplects going to be shown (it is **before** of dropdown menu became visible),
- `shown.bs.droplect` will be triggered when droplects became visibly (which is **after** of dropdown menu appeared visibly), additionally a `focus` event will be triggered on latest selected option's `` element after of this was happened,
- `select.bs.droplect` will be triggered after a value selected from the list of options you provided,
- `focus` will be triggered after a value selected and droplect closed its dropdown, this is because of usablitiy issues,

Also, you can observe `change` events on the DOM element which used for mapping selection defined in `data-map-to` attribute.

### Living Samples of Use

[](#living-samples-of-use)

#### Demo for Basic Use

[](#demo-for-basic-use)

Want a living trial of what is this? You can! Simply visit  in order to have some fun :)

#### Pre-selected State

[](#pre-selected-state)

In most of cases we use form input components rendered on the server-side thus we might need to display them populated and/or selected. This is also possible with Droplect.js which means you can define what option(s) selected by default, representing eg. a list of selection stored previously for a user, by using `data-selected="selected"` attributes:

For single-selection mode:

```
 Action
 Another action
 Something else here
```

For multi-selection mode:

```
Action
Another action
Something else here
```

> You may noticed that the checkbox of item we marked as selected also marked as `checked`, so you should maintain the state of checkboxes as well.

A demo presents this feature in work at  so you could check it.

Legal info
----------

[](#legal-info)

This component based on the original Bootstrap v3.3.7 dropdown.js, although I changed the most of it it's about time to credits for original dropdown's authors - thanks guys!

By the way I'm not much into legals and stuff I mention to my code under the terms of [WTFPL](http://www.wtfpl.net/).

###  Health Score

20

—

LowBetter than 14% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity4

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% 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/a84c693d6fcce961c9953932737eafb748c6db09d1a5ae5e35a5eb89fd037629?d=identicon)[assarte](/maintainers/assarte)

---

Top Contributors

[![assarte](https://avatars.githubusercontent.com/u/5679362?v=4)](https://github.com/assarte "assarte (18 commits)")

### Embed Badge

![Health badge](/badges/webapper-droplect-js/health.svg)

```
[![Health](https://phpackages.com/badges/webapper-droplect-js/health.svg)](https://phpackages.com/packages/webapper-droplect-js)
```

PHPackages © 2026

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