PHPackages                             philippemarcmeyer/vanillaselectchooser - 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. philippemarcmeyer/vanillaselectchooser

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

philippemarcmeyer/vanillaselectchooser
======================================

Transform a select multiple drop down into 2 lists : to choose on the left, chosen on the right

301JavaScript

Since May 29Pushed 4y ago1 watchersCompare

[ Source](https://github.com/PhilippeMarcMeyer/vanillaSelectChooser)[ Packagist](https://packagist.org/packages/philippemarcmeyer/vanillaselectchooser)[ RSS](/packages/philippemarcmeyer-vanillaselectchooser/feed)WikiDiscussions master Synced yesterday

READMEChangelogDependenciesVersions (1)Used By (0)

vanillaSelectChooser
--------------------

[](#vanillaselectchooser)

when order matters...

takes a select multiple drop down and transforms it into 2 lists : to choose on the left, chosen on the right Mimics a select multiple selection mod with Ctrl and shift keys Allows drag and drop Allow reordering of the chosen items

[![screen shot](https://raw.githubusercontent.com/PhilippeMarcMeyer/vanillaSelectChooser/master/vanillaSelectChooser2.png)](https://raw.githubusercontent.com/PhilippeMarcMeyer/vanillaSelectChooser/master/vanillaSelectChooser2.png)

### Demo :

[](#demo-)

### Use :

[](#use-)

#### Make a select multiple attribute ex :

[](#make-a-select-multiple-attribute-ex-)

```
 ...

```

#### Instanciate vanillaSelectChooser() :

[](#instanciate-vanillaselectchooser-)

Example :

```
let chooser = new vanillaSelectChooser("#brands",
    {
        minWidth: 180,
        maxHeight: 400,
        addButtonWidth:50,
        gapBeetween:100
    }
);

```

#### Disposal : You can use

[](#disposal--you-can-use)

```
chooser.destroy()

```

to dispose of it

#### Options :

[](#options-)

- minWidth : the width of a list, default is 200 (px)
- maxHeight : the max height of lists, where the scroll bars appear, default is 400 (px)
- addButtonWidth : Except on small screens, a button between the 2 columns allows to add several items to the second list, defautl is 60 (px)
- gapBeetween : the space between the 2 lists (should be greater than addButtonWidth) default is 120 (px)
- translations : default is { "available": "Availables", "chosen": "Chosen" }, translate in your own language or change the titles

#### onchange event :

[](#onchange-event-)

The onchange event is still available on the select

#### Retrieving the results :

[](#retrieving-the-results-)

Get the results directly in the select :

Example :

```
function getSelectValues() {
    let values = [];
    let options = document.querySelectorAll("#brands option");
    Array.prototype.slice.call(options).forEach(function (x) {
        if (x.hasAttribute("selected")) {
            values.push(x.value);
        }
    });
    return values;
}

```

### History :

[](#history-)

v0.37 : IE 11 support

v0.36 : Nice effects

v0.35 : Drag and Drop multiple from left to right column and sorting modified (the dropped element is placed just before le target element)

v0.30 : Sortable by Drag and Drop (new conception)

v0.27 : IE 11 Compatibility :-(

v0.26 : Correcting destroy() function + adding nous options + css changes

v0.25 : Basic touch screen support (no global Add button (">")) and space reduced to 10 px between the columns

v0.20 : Use of ctrl and shift keys to mimic a select + button add

v0.10 : First fully working version

v0.01 : first prototype Work in progress

###  Health Score

17

—

LowBetter than 6% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity5

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity29

Early-stage or recently created project

 Bus Factor1

Top contributor holds 96.2% 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/f25cdbd56f43eb10243409177110bce5daec9c9d2f3d67732fe7f89320e995f2?d=identicon)[phm.meyer](/maintainers/phm.meyer)

---

Top Contributors

[![PhilippeMarcMeyer](https://avatars.githubusercontent.com/u/2178299?v=4)](https://github.com/PhilippeMarcMeyer "PhilippeMarcMeyer (25 commits)")[![marclaporte](https://avatars.githubusercontent.com/u/1004261?v=4)](https://github.com/marclaporte "marclaporte (1 commits)")

---

Tags

chooserjavascriptvanilla-js

### Embed Badge

![Health badge](/badges/philippemarcmeyer-vanillaselectchooser/health.svg)

```
[![Health](https://phpackages.com/badges/philippemarcmeyer-vanillaselectchooser/health.svg)](https://phpackages.com/packages/philippemarcmeyer-vanillaselectchooser)
```

PHPackages © 2026

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