jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element

Update: For those interested in using this plugin: we now recommend that you download the source from Felix Nagel’s revisions of our plugin, as he’s made many improvements since we first published it. You can find Felix’s branch on Github here: http://github.com/fnagel/jquery-ui. To download a zip, look for the silver “Downloads” button near the top right of the page.

We recently contributed a number of our own plugins to the jQuery UI labs repository, a new branch of the jQuery UI project dedicated to future plugin development. Our latest contribution to labs is the selectmenu plugin, which is designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it’s built with progressive enhancement and accessibility in mind, has all the native mouse and keyboard controls, and is ThemeRoller-ready.

What does it do?

HTML select elements, like many other form elements, are nearly impossible to style and customize across browsers. This jQuery UI widget provides an accessible, styleable, and configurable replacement for select elements, allowing you to customize their behavior and appearance for a richer user experience. The plugin uses progressive enhancement to pull the content and state information from the select before replacing it in the page. After replacing the select element, the selectmenu continues to act as a proxy to the select that it replaced (even though it is hidden from the user), so when the form is submitted, the select value is still there to pass data to the server.

A Quick Demo

The following demo shows a variety of the features currently supported in the selectmenu plugin.

jQuery UI Labs Selectmenu plugin demo by Filament Group

Features

Although this plugin is still in development, we’ve already implemented enough features to make it useful in real-world projects. Some of the features currently supported are:

  • Keyboard accessibility The keyboard events match the native select implementation of popular browsers, including support for arrow keys, enter, space, tab, home, end, page up, and page down. The menu is keyboard accessible while closed as well!
  • ARIA support ARIA attributes are added to the component, making this plugin an accessible replacement for a native select element (for users with modern screen readers).
  • Different menu types Popup or dropdown
  • jQuery UI Widget-factory-driven Built using the standard jQuery UI widget pattern for creating widget instances.
  • ThemeRoller-Ready Full theming support using jQuery UI ThemeRoller
  • Form label association If there’s an associated form label on the page, clicking it will focus the selectmenu widget, and its “for” attribute will properly associate with the selectmenu widget for accessibility purposes.
  • Option Text Formatting The format option allows you to customize the text of every option, creating complex formatting not possible in native select elements.
  • Optgroup support select elements with optgroups are translated into embedded HTML lists with a content-text label matching the optgroup’s label.
  • Disabled attributes on the select element will disable the new component as well.
  • Quick Type-ahead Like a native select menu, you can quickly access options by typing their first letter. Repeating a letter will iterate through the options beginning with that letter.
  • Callback events The selectmenu plugin provides callbacks for open, close, select, and change events, allowing you to execute scripting based on those events. The change event even triggers a change event on the original select element, allowing you to reliably track form change events.
  • Many more updates are included in Felix Nagel’s forked copy of this plugin. See download options below for info

Options and Configuration

The following options are available in this widget:

  • transferClasses: true, transfer classes from select
  • style: ‘popup’, also available: ‘dropdown’
  • width: null, defaults to select width, accepts a number
  • menuWidth: null, sets menu body separately. accepts a number
  • handleWidth: 26, width that the icon arrow block will hang off the edge in a ‘popup’ style menu
  • maxHeight: null, the maximum height of the menu (with support for scrolling overflow).
  • icons: null, an array of objects with “find” and “icon” properties. “find” is a jQuery selector, “icon” is a jQuery UI framework icon class (“ui-icon-script”). This allows you to append span elements to options for use as icons.
  • format: null, Accepts a function with a single argument that can be manipulated and returned with any level of manipulation you’d like

Usage

Using the plugin is as simple as addressing a select element on your page and calling “selectmenu()” method on it. Like this:

$('select').selectmenu();

Beyond that, you can utilize the options mentioned above using the same conventions followed by all other jQuery UI plugins.

Grab the code!

Update: For those interested in using this plugin: we now recommend that you download the source from Felix Nagel’s revisions of our plugin, as he’s made many improvements since we first published it. You can find Felix’s branch on Github here: http://github.com/fnagel/jquery-ui. To download a zip, look for the silver “Downloads” button near the top right of the page.

Help us plan this widget!

There are a number of features still waiting to be implemented in this plugin, and it has not yet achieved priority to move into the “development” branch of the jQuery UI project. In order for this widget to be improved and developed further by the jQuery UI team, we need help finalizing the planned feature set. You can find the planning status and documentation for the selectmenu plugin here: http://wiki.jqueryui.com/Selectmenu (it’s public for reviewing the status but you must join the jQuery UI planning wiki in order to comment or edit).

All blog posts