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.