YUI Library Home

YUI Library Examples: Button Control: Using A Menu Button To Replace A <select> Element

Button Control: Using A Menu Button To Replace A <select> Element

This example illustrates how to use Button to mimic the behavior of an HTML <select> element.

With A Default Value
Using Existing Markup
Lazy load on
Lazy load off
Without Existing Markup
Lazy load on
Lazy load off
Without A Default Value
Using Existing Markup
Lazy load on
Lazy load off
Without Existing Markup
Lazy load on
Lazy load off

By including the Menu family of controls, it is possible to create menu buttons that mimic the behavior of HTML <select> elements.

Basic Setup

Menu buttons can either replace existing <select> elements or can be created completely from script.

Using Existing Markup

To replace an existing <select> element with a menu button, simply set the Button's menu attribute to the id of the <select> element using an object literal passed to the Button's constructor. In this example, the following snippets of HTML and JavaScript are used to transform the first <select> element into a menu button.

Without Existing Markup

To create a menu button without existing markup, simply set the menu configuration property to an array of MenuItem configuration properties, as illustrated by the code used to create the third menu button in this example:

<select> Behavior & Style Customizations

To mimic the behavior of an HTML <select> element, the label of the Button needs to reflect the currently selected MenuItem in the Button's Menu. To update the Button's label attribute when the user clicks on a MenuItem, simply register a listener for the Button's selectedMenuItemChange event that sets the value of the Button's label attribute to the value of the text configuration property of the selected MenuItem instance. The following example illustrates how a selectedMenuItemChange event listener is added to the first Button in this example.

It is also necessary to customize the style of the menu button, to indicate the currently selected item in each Button's menu. When the value of the Button's selectedMenuItem attribute changes, Button adds a class named "yui-button-selectedmenuitem" to the <li> element of the currently selected MenuItem. This class can be used to provide a custom style to the currently selected MenuItem in a Button's Menu. In this example, a Button's currently selected MenuItem is rendered with a check mark to the left of its text label.

In addition to styling a Button's selected MenuItem, the label of each Button in this example is set to a fixed width. This is is accomplished by wrapping the text label of each Button in an <em> tag and setting the <em>'s width property to 5em, and the overflow property to hidden.

Creating Menu Buttons With A Default Value

In HTML, it is possible to specify a default value for a <select> element by applying the selected attribute to one of the <select>'s <option> elements. If a menu button is replacing an existing <select> element, the default value will automatically be interpreted from the <select>'s <option> elements.

If a default value is desired for a menu button built completely from script, it is necessary to specify the default value by setting the selectedMenuItem attribute. The following code illustrates how a default value was specified for the the fourth Button in this example.

For performance, a Button's Menu is lazy loaded by default — the MenuItems are initialized and the Menu's HTML is rendered to the page the first time the Button is clicked. If the user never clicks on the Button, its Menu will never be rendered, meaning the render event handler used to set the default value of the selectedMenuItem attribute will never be called. In such cases it is necessary to add a submit event handler to the Button's parent form that will render the Menu if the Button's selectedMenuItem attribute is not set. The following code illustrates how a submit event handler is added to the parent form of the third button in this example.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings