Jquery plugin to make html select inputs easier to use (UI enhancements).

Installation

Package is dependent on jQuery and Bootstrap, so the corresponding JS and CSS must be referenced in the HTML along with the legtech-select JS and CSS.

Basic Usage

Create a select.

<select id="mySelect" class="allMySelects"><option>Option 1</option><option>Option 2</option></select>

Call legTechSelect() on the jquery selector of your select(s).

$("#mySelect").legTechSelect();  or  $(".allMySelects").legTechSelect();`

It will automatically format the UI if the select is a single or multiple. It will ignore non-select elements. Options that are set to "selected" will be pre-selected, of course.

<select id="singleSelect"><option>Option 1</option><option>Option 2</option></select>` or `<select id="multipleSelect" multiple><option>Option 1</option><option>Option 2</option></select>

External data for options list

You can specify a remote source when initializing the select. Legtech-select will make an AJAX get request to pull in the list of options.

$("#mySelect").legTechSelect("url to data");

The format must be an array of JSON objects with the following properties/values:

{ value: "value of option", text: "Text to display", selected: true/false }

The selected property can be omitted and defaults to false.

Example

[{ value: "US", text: "United States", selected: true },{ value: "CA", text: "Canada" }]

Refreshing the List

If you update the dropdown value list you must call refresh to update the UI. Note that this will clear any selected values.

$("#mySelect").legTechSelect("refresh");

Don't forget to reference the CSS file.