kist-selectdown

Select with customizable menu.

Installation

npm install kist-selectdown --save
 
bower install kist-selectdown --save

API

$Element.selectdown(options)

Returns: jQuery

options

Type: Object|String

Options defined as Object

classes

Type: Object

Classes for elements.

Default value:

{
    wrapper: 'kist-Selectdown',
    originalSelect: 'kist-Selectdown-originalSelect',
    select: 'kist-Selectdown-select',
    optionList: 'kist-Selectdown-optionList',
    optionItem: 'kist-Selectdown-optionItem',
    option: 'kist-Selectdown-option',
    isActive: 'is-active',
    isHidden: 'is-hidden',
    isFocused: 'is-focused'
}

templates

Type: Object

Template generating functions for custom markup.

Available values are:

Name	Arguments	Description
select	data	Template for select element.
option	data	Template for option element.

create

Type: Function
Arguments: [Select element, Custom select element]
Event: selectdowncreate

Callback to run on select menu creation (when DOM elements are ready).

open

Type: Function
Arguments: [Select element, Custom select element]
Event: selectdownopen

Callback to run when select menu is opened.

close

Type: Function
Arguments: [Select element, Custom select element]
Event: selectdownclose

Callback to run when select menu is closed.

select

Type: Function
Arguments: [Current replaced item, Current item value, Original option item]
Event: selectdownselect

Callback to run on option select.

Options defined as String

Type: String

destroy

Destroy plugin instance.

refresh

Refresh select menu (e.g. when changing content with html, append, …)

Examples

Default structure for select menu.

<select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

Standard set of options.

$('select').selectdown();

Basic template support.

$('select').selectdown({
    templates: {
        item: function ( data ) {
            return '<strong><i>Item:</i> <u>' + data.value + '</u></strong>';
        }
    }
});

Callback on item select.

$('select').selectdown({
    select: function ( item, data ) {
        $(this).addClass('inputClass')
        item.addClass('itemClass');
        console.log(data);
    }
});

Refresh plugin instance.

$('select').html('<option value="42">Option 42</option>').selectdown('refresh');

Destroy plugin instance.

$('select').selectdown('destroy');

Testing

Currently, only manual tests are available.

Run npm test -- --watch and open http://0.0.0.0:8000/compiled/test/manual/ in your browser.

Browser support

Tested in IE8+ and all modern browsers.

License

MIT © Ivan Nikolić