HTML and CSS Reference
In-Depth Information
EXAMPLE
11.22 (
CONTINUED
)
if(f.menu1.selectedIndex == 3){
f.text1.value="SH201 Apr 10-13 9am to 5pm, Room 209B,
Miss Bashing";
}
}
</script>
</head>
<body bgcolor="lightgreen">
<font face="arial">
<b>
4
<form name="form1">
Select a Course<br />
5
<select name="menu1" size="4"
onChange="schedule(this.form)">
6
<option name="choice1" value="Perl1">Intro to
Perl</option>
<option name="choice2" value="Perl2">Advanced
Perl</option>
<option name="choice3" value="Unix1">Intro to
Unix</option>
<option name="choice4" value="Shell1">Shell
Programming</option>
</select>
<br /><br />
7
<input type="text" name="text1" size=60
/>
</form>
</font>
</body>
</html>
EXPLANATION
1
A function called
schedule()
is defined. The parameter,
f
, represents the
form
object;
that is,
document.form1
.
2
If the first item in the select menu is checked, the
selectedIndex
value is 0. The num-
ber represents the index into the
options[]
array, where
options[0]
is the first option.
3
If the first option was selected in the menu, then the value of the textbox, called
textbox1
, is assigned a string describing the “
Intro to Perl
” course. This assignment
updates the textbox field dynamically.
4
The form, named
form1
, starts here.
5
The select menu called
menu1
will contain a list of four options. The
onChange
event
will be triggered for this event as soon as something is entered in one of the options.
6
An option list for the select input device is created. This will produce a menu with
choices.
7
An input textbox device, named
text1
, is created. The output is shown in Figures
11.38 and 11.39.