JavaScript Examples Bible - UserWorks Technologies

Select, Option,
and Optgroup
Objects
(Chapter 26)
The SELECT element is the best space-saving device in the
HTML form repertoire. Whether you choose the pop-up
menu or scrolling list display style, your page can provide visitors
with a visually compact list of literally hundreds of items
from which to choose. From a scripter’s point of view, however,
it is a complex item to manage, especially in older
browsers.
In truth, the SELECT element is an outer wrapper for the
OPTION element items nested within. Each OPTION element
contains the text that the user sees in the list, as well as a hidden
value that may be more meaningful to a server database
or client script. The difficulty with browsers prior to IE4 and
NN6 is that reading the hidden value of the currently chosen
item in the list requires an extensive reference to not only the
SELECT element, but to the item in the array of OPTION element
objects. To reach that specific item, the script uses a reference
to the SELECT object’s selectedIndex property as
the options array index. Newer browsers simplify the matter
by providing a single value property for the SELECT object
that returns the value of the currently selected item (or of the
first item when multiple choices are allowed).
Many browser versions provide script facilities for modifying
the content of a SELECT list. But the effect is not perfect in
browsers that don’t also reflow the page to reflect the potentially
resized width of the list.
A user interface debate rages about whether a SELECT list,
whose purpose is obviously intended to direct site navigation,
should navigate immediately upon making a choice or if the
user should also click on an explicit “Go” button next to the
list. The former is faster for the impatient visitor, but the latter
doesn’t shoot off to an undesired page when the user
makes a wrong selection. Good luck with that decision.
10
C H A P T E R
✦ ✦ ✦ ✦
In This Chapter
Triggering action
based on a user’s
selection in a pop-up
or select list
Reading hidden and
visible values of
OPTION element
items
Scripting SELECT
objects that allow
multiple selections
✦ ✦ ✦ ✦