HTML and CSS Reference
In-Depth Information
EXAMPLE
11.21 (
CONTINUED
)
<option name="choice3" value="Unix1">Intro to
Unix</option>
<option name="choice4" value="Shell1">Shell
Programming</option>
4
</select>
<br /><br />
</form>
5
<script type="text/javascript">
document.write("The name of the selection list is ",
6
document.form1.menu1.name
);
document.write("<br />The number of items in the selection"+
7
"list is ",
document.form1.menu1.length
);
document.write("<br />The item currently selected is option["+
8
document.form1.menu1.selectedIndex
+ "]");
document.write("<br />The text in the first selection is "+
9
document.form1.menu1.options[0].text
);
document.write("<br />The text in the second selection is "+
document.form1.menu1.options[1].text)
;
</script>
</strong>
</font>
</body>
</html>
EXPLANATION
1
The HTML form named
form1
starts here. The
action
and
method
attributes are not
included here because this form is not being sent to a server.
2
The
select
tag starts a drop-down list named
menu1
; it has four options.
3
The options that will appear in the menu are listed.
4
This ends the select list.
5
The JavaScript program starts here. It displays the properties of the
select
object.
6
The name of the
select
object is displayed.
7
The number of options in the select list is displayed.
8
The index value of the option selected by the user is displayed. If no option has
been selected, the value of
selectedIndex
is -
1
. If one has been selected, the index
value of the option is displayed. The options are in an array where the index starts
at 0. The first option is at index 0, the second option is index 1, and so on.
9
The actual text shown in the list for the first option is displayed, followed by the
text in the second selection. The output is shown in Figures 11.36 and 11.37.
