perfectsense / brightspot-js-select

bsp_select bsp utility

... index.html is a working demo; so look at that, first.

CSS provided has optional rules & required rules (this needs to be specified).

---

Getting started

Look at the HTML & CSS & JS ...

This is the most basic implementation:

bsp_select.live(document, ".custom-select");

Where, independently, you might attach change event(s) to your <select>, for example:

$(document).on("change", "select", function() {
    console.log( "this select changed:", $(this).val() );
});

... that change event will get copied to the custom ui.

Modifying the look & feel just requires updating some vars in bsp-select.less (or maybe bsp-select.css).

Other dependencies include jQuery 1.7 or greater & the core bsp-utils.js file (see the bower.json file included).

---

Options (where these are the defaults)

    {
        debug: false,
        icons: {
            "open":  "fa-chevron-down",
            "close": "fa-chevron-up"
        },
        maxItems: null,
        openClassName: "open",
        openUpwardClassName: "open-upward",
        forceUpward: false
    }

"open" & "close" are for CSS classNames that get used to indicate the open or closed state of the dropdown.

"maxItems" is useful for constraining the dropdown's height when there are a ton of <option> elements, this requires applying a height or min-height to <option> elements in the CSS/Less.

The sample files & default options use classes that correspond to Font Awesome.

---

Methods

.add

There are also some public methods you can access, for example to be able to add arbitrary <option>s, use the .add method:

bsp_utils.add( "some text", "some-value", ".some-selector" );

(The value argument, the 2nd one, is optional, just like the value attribute on an <option> element.)

.replaceOptions

To be able to replace all <option>s, use the .replaceOptions method:

bsp_utils.replaceOptions(
    [{
        "_value" : "America/Puerto_Rico",
        "_text"  : "Puerto Rico (Atlantic)"
    }, {
        "_value" : "Pacific/Honolulu",
        "_text"  : "Honolulu (Hawaii)"
    }],
    ".some-selector"
);

.addOptions

In the previous example, you could append a set of options by calling addOptions instead of replaceOptions.

---