JavaScript Popup Menu

This page contains popup menu used for selecting a page or URL

Please note that JavaScript is currently only available in Netscape Navigator 2.0 or higher.
Do not assume that all in your audience are using a JavaScript enabled browser.

Here is an example on how JavaScript can be used in a form with a popup menu that has links to other pages.

How to use

The source of the popup menu looks like this:

<FORM> <SELECT NAME="menu"> <OPTION VALUE="index.html" SELECTED>Contents <OPTION VALUE="groucho.html">Groucho <OPTION VALUE="harpo.html">Harpo <OPTION VALUE="chico.html">Chico <OPTION VALUE="zeppo.html">Zeppo </SELECT> <INPUT TYPE=Button VALUE="Go" onClick="top.location.href = this.form.menu.options[this.form.menu.selectedIndex].value"> </FORM>

Change the links and text to be displayed in the menu by editing the lines containing the OPTION tags. Note that you can also use full URL's in the VALUE attribute.

Change the text of the button in the Value attribute of
<INPUT TYPE=BUTTON VALUE="Go" ...

Programming notes

The actual JavaScript is in the button's onClick handler. The JavaScript array this.form.menu.options is an array of the option tags (with its contents) in the form named "menu". To find which menu item that is selected we can use the property this.form.menu.selectedIndex, that holds the index of the selected item.

We then get the name of the page by accessing the value attribute of the selected item in the array with the expression this.form.menu.options[this.form.menu.selectedIndex].value.

top.location.href is the address of the url to be displayed in the window. Since we set top.location to contain the new pages URL, the new page will be displayed in the entire window, even if our page is inside a frame. To get a page to be displayed in a specific frame is an exercise left to the reader ;-).