The following image shows two identical menus; the first is in its initial state and the second one is opened by the user:

You can use the SELECT attribute (no value is necessary) to automatically select a default option when the page loads. For example, the following script creates a menu as shown in Figure 22-13, where the default option (which is also the value that appears highlighted in the box) is “Sun”:

<SELECT NAME="comp">
<OPTION VALUE="http://www.microsoft.com/">Microsoft
<OPTION VALUE="http://home.netscape.com/">Netscape
<OPTION VALUE="http://www.sun.com/" SELECTED>Sun
</SELECT>

The text in the box is not the VALUE attribute specified inside the <OPTION> tag, but is rather the string placed outside the <OPTION> tag. The string has no effect other than being the menu label.

The main advantage of this menu is that, due to its pop-up configuration, it does not take up much space on the page. Its disadvantage is that the user can select only one option. To work around this deficiency, you can specify the MULTIPLE attribute, but, since all options are laid out instead of popping up, you lose the space advantage (no free lunch!). Here is a simple example:

<SELECT NAME="comp" MULTIPLE>
<OPTION VALUE="http://www.microsoft.com/">Microsoft
<OPTION VALUE="http://home.netscape.com/">Netscape
<OPTION VALUE="http://www.sun.com/" SELECTED>Sun
</SELECT>

Figure 22-13 outlines the construct used for such menus:

You can select multiple options by holding the Shift button down and selecting or deselecting options from the menu. The Control key can also be held in order to select each option individually. These keys are commonly used in all major operating systems.

The complete syntax for the select object is as follows:

<SELECT
 NAME="selectName"
 [SIZE="integer"]
 [MULTIPLE]
 [onBlur="handlerText"]
 [onChange="handlerText"]
 [onFocus="handlerText"]>
 <OPTION VALUE="optionValue" [SELECTED]>textToDisplay
 […<OPTION VALUE="optionValue" [SELECTED]>textToDisplay]
</SELECT>

You should recognize all attributes except for the event handlers, which are explained later.

JavaScript Access

[window.]document.formName.selectName
[window.]document.formName.elements[index]
[window.]document.forms[index].selectName
[window.]document.forms[index].elements[index]

You can access a specific option in a select object by appending an options property to its reference (one of the above). This property is actually an array of options, starting at index 0. You can reference, for example, the first option of a select object in the following fashion:

[window.]document.formName.selectName.options[0]

The options array is discussed later as one of the select object’s properties.

Event Handlers

onBlur

A blur event occurs when a select object loses focus. The onBlur event handler’s script executes upon a blur event. There are a few ways to generate a blur event:

• Select an option from the list and then click outside the select object, either on the page’s body or in another form element.
• Select an option from the menu and then send the browser’s window to the background. The new window you focus on may be a different browser window or a window associated with any foreign application.

This event handler is not very useful, because it relies on the user to remove focus from the object, which is not that intuitive.

onFocus

A focus event associated with a select object occurs when the user gives it a focus; that is, when the user attempts to select an option from the menu, but before the menu pops up or modifies the currently selected option. The onFocus event handler responds to a focus event. When the user clicks somewhere inside the select object, you can, for example, pop up an alert box with user instructions for that particular menu. The following source demonstrates this suggestion:

<FORM>
<SELECT NAME="comp" onFocus="alert('Simply select the desired home')">
<OPTION VALUE="http://www.microsoft.com/">Microsoft
<OPTION VALUE="http://home.netscape.com/">Netscape
<OPTION VALUE="http://www.sun.com/" SELECTED>Sun
</SELECT>
</FORM>

onChange

A change event associated with a select object occurs when the user changes the selected option. Unlike change events associated with other objects, the select object does not have to lose focus in order to generate the event. The onChange event handler executes when a change event occurs.

The onChange event handler is commonly used for exchanging information with the user. We will demonstrate this event handler in later examples, when we discuss the select object’s methods and properties.

Methods

blur, focus

The only explicit methods of the select object are blur() and focus(). See the listings for the text object at the beginning of this chapter for complete coverage of these methods.

Properties (select object)

The select object features various properties, but the most useful are actually properties of the options array, as you will find out later. In this section we shall discuss only the properties that directly belong to the select object.

length

You can access the number of options in a select object through the length property. Since this value is also referenced as the length property of the options array, you have the freedom to choose whose length to use. Since length is known to be a standard property of all arrays in JavaScript, we personally prefer referencing length via the options array. Netscape Navigator accepts any of the following references to the number of options in the select object:

selectName.length
selectName.options.length
selectName.options.options.length
selectName.options.options.options.length
.
.
.

Microsoft Internet Explorer 3.0 accepts only the first two, but, since the third one does not make any sense, you should avoid using it anyway.

The value of the length property should not be assigned by a script. It is dynamic, so it changes whenever an option is added to the corresponding select object.

name

The name property reflects the NAME attribute of the <SELECT> tag. You can modify this property freely. Adjusting it via a script overrides the initial HTML Isetting. The following script segment shows how to display the name property (“products”) via an alert dialog box:

<SCRIPT LANGUAGE="JavaScript">
<!--

function sayName(selectObject) {
  alert(selectObject.name)
}

// -->
</SCRIPT>
<FORM>
<SELECT NAME="products" onChange="sayName(this)">
<OPTION VALUE="sny">Sony
<OPTION VALUE="jvc">JVC
<OPTION VALUE="tsh">Toshiba
</SELECT>
</FORM>