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:

{% highlight js %}$('#mySelectlist').selectlist();{% endhighlight %}

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.

{% highlight html %} {% endhighlight %}

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})') {% highlight js %}$('#mySelectlist').selectlist('selectByIndex', 1);{% endhighlight %}

.selectlist('selectByText')

Set the selected item based on its text value {% highlight js %}$('#mySelectlist').selectlist('selectByText', 'Four');{% endhighlight %}

.selectlist('selectBySelector')

Set the selected item based on a selector {% highlight js %}$('#mySelectlist').selectlist('selectBySelector', 'li[data-fizz=buzz]');{% endhighlight %}

.selectlist('selectByValue')

Set the selected item based on its data-value attribute value. Convenience method for .selectBySelector('data-value={value}'). {% highlight js %}$('#mySelectlist').selectlist('selectByValue', 'foo');{% endhighlight %}

Events

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

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

Examples

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