jQuery selectBox: A styleable replacement for SELECT elements

Licensed under the MIT license: http://opensource.org/licenses/MIT

Features

• Supports OPTGROUPS
• Supports standard dropdown controls
• Supports multi-select controls (i.e. multiple="multiple")
• Supports inline controls (i.e. size="5")
• Fully accessible via keyboard
• Shift + click (or shift + enter) to select a range of options in multi-select controls
• Type to search when the control has focus
• Auto-height based on the size attribute (to use, omit the height property in your CSS!)
• Tested in IE7-IE9, Firefox 3-4, recent WebKit browsers, and Opera

Usage

Download the latest version: https://github.com/marcj/jquery-selectBox/releases

Link to the JS file:

<script src="jquery.selectbox.js" type="text/javascript"></script>

Add the CSS file (or append contents to your own stylesheet):

<link href="jquery.selectbox.css" rel="stylesheet" type="text/css" />

To initialize:

// default
$('select').selectBox();

// or with custom settings
$('select').selectBox({
    mobile: true,
    menuSpeed: 'fast'
});

Settings

To specify settings after the init, use this syntax:

$('select').selectBox('settings', {settingName: value, ... });

Methods

To call a method use this syntax:

$('select').selectBox('methodName', [option]);

Available methods

             | available) as in the `SelectBox` class below.                                                 |

API SelectBox

You can instantiate the selectBox also through a classic OOP way:

var selectBox = new SelectBox($('#mySelectBox'), settings = {});
selectBox.showMenu();

The public methods are:

refresh()
destroy()
disable()
enable()

getLabelClass()
getLabelText()
getSelectElement()
getOptions(String type = 'inline'|'dropdown')

hideMenus()
showMenu()

setLabel()
setOptions(Object options)
setValue(String value)

removeHover(HTMLElement li)
addHover(HTMLElement li)

disableSelection(HTMLElement selector)
generateOptions(jQuery self, jQuery options)
handleKeyDown(event)
handleKeyPress(event)
init(options)
keepOptionInView(jQuery li, Boolean center)
refresh()
removeHover(HTMLElement li)
selectOption(HTMLElement li, event)

Events

Events are fired on the original select element. You can bind events like this:

$('select').selectBox().change(function () {
    alert($(this).val());
});

Available events

Known Issues

• The blur and focus callbacks are not very reliable in IE7. The change callback works fine.

Credits

Original plugin by Cory LaViska of A Beautiful Site, LLC. (http://www.abeautifulsite.net/)