PHPackages                             blobfolio/blob-select - 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. blobfolio/blob-select

ArchivedComponent

blobfolio/blob-select
=====================

A dependency-free Javascript plugin for styling SELECT elements with an emphasis on markup simplicity and performance.

2.1.0(7y ago)415WTFPLJavaScript

Since Nov 7Pushed 3y ago1 watchersCompare

[ Source](https://github.com/Blobfolio/blob-select)[ Packagist](https://packagist.org/packages/blobfolio/blob-select)[ Docs](https://github.com/Blobfolio/blob-select)[ RSS](/packages/blobfolio-blob-select/feed)WikiDiscussions master Synced 2mo ago

READMEChangelog (8)Dependencies (1)Versions (7)Used By (0)

blob-select
===========

[](#blob-select)

A dependency-free Javascript plugin for styling `` elements with an emphasis on markup simplicity and performance.

Note: For projects built with the [Vue.js](https://vuejs.org/) framework, the [vue-blob-select](https://github.com/Blobfolio/vue-blob-select) fork might be a better fit.

##### Table of Contents

[](#table-of-contents)

1. [Features](#features)
2. [Requirements](#requirements)
3. [Use](#use)
    - [Installation](#installation)
    - [Configuration](#configuration)
    - [Initialization](#initialization)
    - [Destruction](#destruction)
    - [Repaint](#repaint)
4. [Styling](#styling)
5. [License](#license)

Features
--------

[](#features)

blob-select has feature parity with the standard ``, ``, and `` attributes, including:

- ``
- ``
- ``
- ``

blob-select additionally provides support for:

- Placeholders
- Searching
- Sorting

Requirements
------------

[](#requirements)

blob-select is written in pure Javascript and does not depend on any third-party frameworks.

It is compatible with all major modern web browsers, and the browser that just won't die IE 11.

This plugin does make use of some ES6 markup like `let` and `const`. If your project needs to support *old* browsers, you will need to first transpile `blobselect.min.js` to ES5 with a tool like [Babel](https://babeljs.io/), then serve that copy to visitors.

Use
---

[](#use)

### Installation

[](#installation)

Download `dist/blobselect.min.js` and add it to your project folder, and include it somewhere on the page.

```

```

Aside from the main script, you'll also need some CSS styles. You can either plug in the default stylesheet from `dist/css/` or take a look at the source in `src/scss/` to roll your own.

### Configuration

[](#configuration)

blob-select includes a few choice functional enhancements to the standard `select` browser object, but does not attempt to introduce every feature ever dreamt of by (wo)man or beast. These settings can be defined for each element in either of three ways:

```

    document.getElementById('my-select').blobSelect({
        foo : "bar",
        …
    });

```

The following settings are available:

TypeKeyDefaultDescription*string***orderType**`""`How to compare option labels for sorting; either `"string"`, `"numeric"`, or empty to not sort.*string***order**`"asc"`Sort order (if **orderType** is specified); `"asc"` or `"desc"`.*string***placeholder**`"---"`Selected text to display when a "placeholder" `` is selected. Placeholderness is `TRUE` when an `` has no label or has an attribute `data-placeholder="1"`.*string***placeholderOption**`"---"`Same as above, except this text is used only for the dropdown listing. If omitted, the *placeholder* setting will supply both.*bool***search**`FALSE`Whether or not to display a simple search field in the dropdown. The search field itself is a contentEditable `` so as not to screw up your real ``.*int***watch**`0`This forces `blob-select` to re-check for changes to its element every *X* milliseconds. This option is useful when other scripts might manipulate the element without firing a `change` event. Otherwise, leave this disabled to spare the unnecessary overhead.### Initialization

[](#initialization)

blob-select will automatically initialize any `` elements on `DOMContentLoaded` that contain a `data-blobselect*` attribute. Alternatively, you can manually initialize an element at any time as follows:

```
// Regular ol' JS.
document.getElementById('my-select').blobSelect.init({…});

// jQuery example.
$('#my-select')[0].blobSelect.init({…});
```

### Destruction

[](#destruction)

To restore your page to its natural state, simply run:

```
document.getElementById('my-select').blobSelect.destroy();
```

### Repaint

[](#repaint)

`blob-select` will automatically listen for `change` events, but some Javascript frameworks might write changes without firing an event. There are two workarounds for this:

**watch**:

Set the `watch` runtime property on the field. This will add a `setInterval()` trigger to the mix, rechecking the DOM every `X` millseconds for changes (and rebuilding as necessary).

```

…
```

**element.blobSelect.buildData()**:

Call the `.buildData()` method after such changes have landed.

```
// Place this after secret, non-event-firing changes have run.
document.getElementById('my-select').blobSelect.buildData();
```

Styling
-------

[](#styling)

blob-select aims to be as headache-free as possible. Its markup is minimal (see below) and it does not impose pesky inline styles, Javascript animations, or convoluted nested>nested>nested elements. Frontend developers are free to define everything through elegant CSS wizardry.

The HTML structure is as follows:

```

        Apples

    …

        Option Label

        Fruit

```

The SCSS source folder includes example styles that should provide a starting point and/or inspiration. :)

License
-------

[](#license)

Copyright © 2018 [Blobfolio, LLC](https://blobfolio.com) <>

This work is free. You can redistribute it and/or modify it under the terms of the Do What The Fuck You Want To Public License, Version 2.

```
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004

Copyright (C) 2004 Sam Hocevar

Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.

DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

0. You just DO WHAT THE FUCK YOU WANT TO.

```

### Donations

[](#donations)

   [![Bitcoin QR](https://camo.githubusercontent.com/02c1aab6dc8b7908cb540a77b3df80ff1781b137aa6e4de8e795aac613ffe124/68747470733a2f2f626c6f62666f6c696f2e636f6d2f77702d636f6e74656e742f7468656d65732f62332f7376672f6274632d6769746875622e737667)](https://camo.githubusercontent.com/02c1aab6dc8b7908cb540a77b3df80ff1781b137aa6e4de8e795aac613ffe124/68747470733a2f2f626c6f62666f6c696f2e636f6d2f77702d636f6e74656e742f7468656d65732f62332f7376672f6274632d6769746875622e737667) If you have found this work useful and would like to contribute financially, Bitcoin tips are always welcome!

**1Af56Nxauv8M1ChyQxtBe1yvdp2jtaB1GF**

###  Health Score

29

—

LowBetter than 59% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity10

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity67

Established project with proven stability

 Bus Factor1

Top contributor holds 98.7% 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.

###  Release Activity

Cadence

Every ~96 days

Recently: every ~61 days

Total

7

Last Release

2895d ago

Major Versions

1.1.2 → 2.0.02017-10-11

### Community

Maintainers

![](https://www.gravatar.com/avatar/74cb6ecb5887fa7b80c3aa263b6016e403989d28e93a35420536740599d6d909?d=identicon)[joshstoik1](/maintainers/joshstoik1)

---

Top Contributors

[![joshstoik1](https://avatars.githubusercontent.com/u/403248?v=4)](https://github.com/joshstoik1 "joshstoik1 (76 commits)")[![tstoik](https://avatars.githubusercontent.com/u/4510657?v=4)](https://github.com/tstoik "tstoik (1 commits)")

---

Tags

css-selectdependency-freedropdownfrontendjavascriptselect

### Embed Badge

![Health badge](/badges/blobfolio-blob-select/health.svg)

```
[![Health](https://phpackages.com/badges/blobfolio-blob-select/health.svg)](https://phpackages.com/packages/blobfolio-blob-select)
```

###  Alternatives

[fullcalendar/fullcalendar

Full-sized drag & drop event calendar

20.4k373.3k4](/packages/fullcalendar-fullcalendar)[eternicode/bootstrap-datepicker

A datepicker for Bootstrap

12.7k543.8k6](/packages/eternicode-bootstrap-datepicker)[eonasdan/bootstrap-datetimepicker

Date/time picker widget based on twitter bootstrap

7.2k492.4k9](/packages/eonasdan-bootstrap-datetimepicker)[happyworm/jplayer

jPlayer allows you to create a media player with a consistent interface and experience across all browsers.

4.6k114.2k1](/packages/happyworm-jplayer)[imsky/holder

Client-side image placeholders.

5.8k20.5k2](/packages/imsky-holder)[trentrichardson/jquery-timepicker-addon

Adds a timepicker to jQueryUI Datepicker.

2.6k70.2k](/packages/trentrichardson-jquery-timepicker-addon)

PHPackages © 2026

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