Pellowe, Code Handout, page 5
1.3 "Scrollable" pull-down menu (several choices visible)
This code is from the second pull-down menu page
http://www2.gol.com/users/billp/course/ch1p23.html
1.3.1 The SIZE element
All of the elements of this kind of menu are the same as with a regular pull-down
menu, except for one line. In a regular pull-down menu (see page 4), the first line
of your menu code is this:
<SELECT NAME="destinations">
However, in a scrollable menu with several options visible, the code looks like this:
<SELECT NAME="destinations" SIZE="3">
SIZE=3 means that 3 options will be visible. You can, of course, change this number.
If this number is lower than the number of options, then the list will have a scroll
bar.
1.3.2 Prevent student confusion and blind clicking:
Note that with this kind of menu, if a student simply clicks "GO" without
having made a selection, they will just get a bewildering error message. A good idea
is to pre-select the first item, perhaps even naming the item "Choose one",
and have that link to a page which explains the mistake, like this:
<SELECT NAME="destinations" SIZE="3">
<OPTION VALUE="mistake.html" SELECTED>Choose one</OPTION>
<OPTION VALUE="answer1.html">Text of option here</OPTION>
<OPTION VALUE="answer2.html">Text of option here</OPTION>
(et cetera)
</SELECT>
<INPUT TYPE="Button" VALUE="Go" onClick="Go_Dest(this.form)">
What happens here is that if a student clicks Go without having made a selection,
the student is given a second chance. This is useful to bear in mind if you use these
menus for action mazes or lesson content tables.