Using a combination of HTML and JavaScript enables us to create a select menu which lists web pages to visit. Here are the two different kinds we are going to learn how to create:

Try them out to see how they work! The first requires a button to go to the page selected. The second example automatically goes to the page selected.

In order to create a select menu, we need to create a table (<TABLE> and </TABLE>) inside of a form (<FORM> and </FORM>). The table just sets up the layout of the menu and button, and the form allows the user to select from the list.

Inside of the table we need to use the tags <SELECT> and </SELECT> to show where in the table the selecting is to occur. For each item in the list we use the tag <OPTION VALUE="page.html">. Finally we need to create a button that the user can click on to go to that page. Putting all these pieces together produces the following code to create a select menu:

<FORM>
<TABLE>
<TR><TD>
<SELECT NAME="list">
<OPTION VALUE="start.html">Getting Started
<OPTION VALUE="back.html">Backgrounds
<OPTION VALUE="text.html">Adding Text
<OPTION VALUE="graphic.html">Graphics
</SELECT></TD>
<TD>
<INPUT TYPE=BUTTON VALUE="Go"
onClick="top.location.href=this.form.list.options[this.form.list.selectedIndex].value">
</TD></TR>
</TABLE>
</FORM>

First we need to set up the selection list. This is the same as the first example except the onChange attribute is added to the SELECT tag.

<form>
<SELECT onChange="goto(this);" size="1">
<OPTION>please select
<OPTION VALUE="start.html">Getting Started
<OPTION VALUE="back.html">Backgrounds
<OPTION VALUE="text.html">Adding Text
<OPTION VALUE="graphic.html">Graphics
</SELECT>
</FORM>

Next we need to put the following script into the HEAD part of the document.

<SCRIPT language="JavaScript">
<!--
function goto(there) {
var location = there.options[there.selectedIndex].value;
window.location.href = location;
there.selectedIndex = 0;
}
-->
</SCRIPT>

This page has been accessed

times since June 24, 2001