Pellowe, Code Handout, page 5

1.3 "Scrollable" pull-down menu (several choices visible)

This code is from the second pull-down menu page

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)
<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.

Code from actual page:
<SELECT NAME="destinations" SIZE="6">
<OPTION VALUE="ch1p23no.html" SELECTED>number 20 </OPTION>
<OPTION VALUE="ch1p23no.html">number 21 </OPTION>
<OPTION VALUE="ch1p23no.html">number 22 </OPTION>
<OPTION VALUE="ch1p23no.html">number 23 </OPTION>
<OPTION VALUE="ch1p23no.html">number 24 </OPTION>
<OPTION VALUE="ch1p23no.html">number 25 </OPTION>
<OPTION VALUE="ch1p23no.html">number 26 </OPTION>
<OPTION VALUE="ch1p23no.html">number 27 </OPTION>
<OPTION VALUE="ch1p23no.html">number 28 </OPTION>
<OPTION VALUE="ch1p23no.html">number 29 </OPTION>
<OPTION VALUE="ch1p23no.html">number 30 </OPTION>
<OPTION VALUE="ch1p23no.html">number 31 </OPTION>
<OPTION VALUE="ch1p23no.html">number 32 </OPTION>
<OPTION VALUE="ch1p23no.html">number 33 </OPTION>
<OPTION VALUE="ch1p24.html">number 34 </OPTION>
<OPTION VALUE="ch1p23no.html">number 35 </OPTION>
<OPTION VALUE="ch1p23no.html">number 36 </OPTION>
<OPTION VALUE="ch1p23no.html">number 37 </OPTION>
<OPTION VALUE="ch1p23no.html">number 38 </OPTION>
<OPTION VALUE="ch1p23no.html">number 39 </OPTION>
<OPTION VALUE="ch1p23no.html">number 40 </OPTION>