Selectlist selectlist.js

A single select drop-down similar to the native select control, but standardized to look the same across browsers.

Usage

Via JavaScript

Call the selectlist control via JavaScript:

$('#mySelectlist').selectlist();

Via data-attributes

Add data-initialize="selectlist" to the .selectlist element that you wish to initialize on $.ready(). Any selectlist that is programmatically generated after the initial page load will initialize when the mousedown event is fired on it if it has data-initialize="selectlist".

Markup

Wrap class="selectlist" around an input and a button within a class="fuelux" container.

<div class="btn-group selectlist" id="mySelectlist" data-resize="auto" data-initialize="selectlist">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
    <span class="selected-label">&nbsp;</span>
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li data-value="1"><a href="#">One</a></li>
    ...
  </ul>
  <input class="hidden hidden-field" name="mySelectlist" readonly="readonly" aria-hidden="true" type="text"/>
</div>

Methods

.selectlist('destroy')

Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.

.selectlist('disable')

Ensures the component is disabled

.selectlist('enable')

Ensures the component is enabled

.selectlist('selectedItem')

Returns an object containing the jQuery data() contents of the selected item. This data includes .data-* attributes plus a text property with the visible text from the item.

.selectlist('selectByIndex')

Set the selected item based on its index in the list (zero-based index). Convenience method for .selectBySelector('li:eq({index})')

$('#mySelectlist').selectlist('selectByIndex', 1);

.selectlist('selectByText')

Set the selected item based on its text value

$('#mySelectlist').selectlist('selectByText', 'Four');

.selectlist('selectBySelector')

Set the selected item based on a selector

$('#mySelectlist').selectlist('selectBySelector', 'li[data-fizz=buzz]');

.selectlist('selectByValue')

Set the selected item based on its data-value attribute value. Convenience method for .selectBySelector('data-value={value}').

$('#mySelectlist').selectlist('selectByValue', 'foo');

Events

All selectlist events are fired on the .selectlist classed element.

$('#mySelectlist').on('changed.fu.selectlist', function () {
  // do something
});

Examples

A single select drop-down similar to the native select control. Wrap the input and selectlist button within .fuelux .selectlist