jQuery selectBox: A styleable replacement for SELECT elements

Copyright 2011 Cory LaViska for A Beautiful Site, LLC. (http://abeautifulsite.net/)

Dual licensed under the MIT / GPLv2 licenses

Demo

http://labs.abeautifulsite.net/jquery-selectBox/

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

Link to the JS file:

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

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

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

To create:

$("SELECT").selectBox([settings]);

Settings

To specify settings, use this syntax:

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

Available settings

• menuTransition [default,slide,fade] - the show/hide transition for dropdown menus
• menuSpeed [slow,normal,fast] - the show/hide transition speed
• loopOptions [boolean] - flag to allow arrow keys to loop through options

Methods

To call a method use this syntax:

$("SELECT").selectBox('methodName', [options]);

Available methods

• create - Creates the control (default)
• destroy - Destroys the selectBox control and reverts back to the original form control
• disable - Disables the control (i.e. disabled="disabled")
• enable - Enables the control
• value - if passed with a value, sets the control to that value; otherwise returns the current value
• options - if passed either a string of HTML or a JSON object, replaces the existing options; otherwise returns the options container element as a jQuery object
• control - returns the selectBox control element (an anchor tag) for working with directly
• refresh - updates the selectBox control's options based on the original controls options

Events

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

$("SELECT").selectBox().change( function() { alert( $(this).val() ); } );

Available events

• focus - Fired when the control gains focus
• blur - Fired when the control loses focus
• change - Fired when the value of a control changes
• beforeopen - Fired before a dropdown menu opens (cancelable)
• open - Fired after a dropdown menu opens (not cancelable)
• beforeclose - Fired before a dropdown menu closes (cancelable)
• close - Fired after a dropdown menu closes (not cancelable)

Known Issues

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