glowDropDownList jQuery Plugin

jQuery.fn.glowDropDownList

This plugin gracefully enhances a standard HTML select input with the ability to be fully styled with custom markup

Usage

Initiate a selection of select elements to be drop down lists

$('selector').glowDropDownList(options)

where selector contains <select> element(s) and options is an optional object argument

Options

selectedItemWidth: pixel width of a currently-selected item
- default: 200
selectedItemHeight: pixel height of a currently-selected item
- default: 32
itemsWidth: pixel width of items
- default: 200
itemsHeight: pixel height of items
- default: 300
itemsHtml: array of html fragment representations of elements. When provided, elements from this array will be used to render selectable options.
- default: []
showHtmlWhenSelected: boolean value of whether or not to show the html-representation of the selected option as the currently selected item
- default: true
buttonImageUrl: image path to use for a drop down arrow
- default: Evolution-provided button image
className: CSS class name to apply to the rendered drop down list
- default: empty string
activeClassName: CSS class name to apply to the rendered drop down list when options are shown
- default: empty string

Methods

val

Gets and/or sets the current value of the drop down list

var value = $('selector').glowDropDownList('val');
$('selector').glowDropDownList('val', 'someValue');

selectedIndex

Gets and/or sets the current index of the selected item in the drop down list.

var index = $('selector').glowDropDownList('selectedIndex');
$('selector').glowDropDownList('selectedIndex', 5);       // will set the value
$('selector').glowDropDownList('selectedIndex', 5, true); // will set the value and process change events

getText

Gets the text of the currently selected item

disabled

Gets and/or sets whether the ability to select items is disabled

var disabled = $('selector').glowDropDownList('disabled');
$('selector').glowDropDownList('disabled', true);

add

Adds a new DropDownList item to list of selectable options

var item = $('selector').glowDropDownList('createItem', { value: 'some value', text: 'some text', html: 'html to display');
$('selector').glowDropDownList('add', item));

remove

Removes a DropDownList item from the selectable options

$('selector').glowDropDownList('remove', item);

clear

Removes all selectable options from the DropDownList

$('selector').glowDropDownList('clear');

insert

Adds a new DropDownList item to list of selectable options at a specific index position

var item = $('selector').glowDropDownList('createItem', { value: 'some value', text: 'some text', html: 'html to display');
$('selector').glowDropDownList('add', item, 2);

getByIndex

Gets a DropDownList item at a given position index

var item = $('selector').glowDropDownList('getByIndex' 2);

count

Returns the number of selectable items

var count = $('selector').glowDropDownList('count');

createItem

Creates a new DropDownList item which can then be inserted or added

var item = $('selector').glowDropDownList('createItem', { value: 'some value', text: 'some text', html: 'html to display');

Recommended