Working with Forms and Input Devices - JavaScript by Example - page 385

Selection Lists (Drop-Down Menus). The HTML <select> tag defines a field for
display as a drop-down or a scrolling box. A select list consists of menu items called
options. JavaScript supports a select object. The select object can be named but the
options cannot. However, the select object has an options property (unique to DOM 0)
that is an array of all the option items, so that if you have to get access to one of the
options, remove or add options, you can use the options array. The selectedIndex property
contains a number that represents the index number of the option that has been
selected. If, for example, the first option in the menu is selected, then the value of the
selectedIndex property is 0 (because array elements start at 0). To get a value in the selec-
tion list, you could use, for example, document.form1.select1.options[0].value , where
form1 is the name of the form, select1 is the name of the select object, and options[0] is
the first option in the list. Tables 11.15 and 11.16 list the properties and methods of the
select object. Figure 11.35 shows the JavaScript object hierarchy for the select object.

Table 11.15 Properties of the select Object

Property What It Describes

disabled Sets or retrieves a value that indicates whether the user can interact with

the drop-down list.

form The name of the form where the select is defined.

id Sets or retrieves the id of a drop-down list.

length The number of items in the select list; same as options.length.

multiple Sets or retrieves whether or not multiple items can be selected.

name The name used to reference the select menu.

options[] An array of option objects describing each of the selection options. Can

modify select options (JavaScript 1.1). The options object has properties:
index length, text, selected, value.

selectedIndex The integer index value of a selected option, -1 if no option is selected.

This value can be modified. If set to an index value, that option is selected ,
and all others deselected.

size Sets or retrieves the number of visible rows in a drop-down list.

tabIndex Sets or retrieves the index that defines the tab order for the select object.

type Two possible values for the select object; if multiple is on, the value is

select-one and if not, select-multiple.