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.
Search WWH ::




Custom Search