Select with customizable menu.

npm install kist-selectdown --save

bower install kist-selectdown --save

Returns: jQuery

Type: Object|String

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'
}

Type: Object

Template generating functions for custom markup.

Available values are:

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

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

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

Callback to run when select menu is opened.

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

Callback to run when select menu is closed.

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

Callback to run on option select.

Type: String

Destroy plugin instance.

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

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');

Currently, only manual tests are available.

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

Tested in IE8+ and all modern browsers.

MIT © Ivan Nikolić