JavaScript : Pull-Down Menu

The pull down menu is an nice way to condense many links into a small area. In the older days the only way to process a pull-down menu was to use a CGI script, but now you can do it with JavaScript.

Here's an example:


mkaz.com -------------------- Mathematics Photo -------------------- Javascript Style Sheet Tutorial Mac OS X -------------------- google.com

The JavaScript portion of this, that part that goes within the HEAD section of the document is:

Code Explanation
The name of the form used in this example is theForm and the name of the select field is aaa (see html form below). The first line grabs the index number of the option that is selected in the select box. The index numbering starts at 0 and goes up to however many options you have. The value in the option field is the URL we want the browser to go to. The final line sets the browsers location to this url, and this sends it on its way.

The HTML portion is nothing more than a form, with a pull-down menu and a button which calls the above function. The different options in the menu define the URL and the text displayed. The GO button uses the onClick method to call our function. The code looks like:

No GO button (automatically redirect)
Another variant of this is to have no button that you have to press, and to go to the URL as soon as the person selects a site. This can be quicker and easier, but can be frustrating if the person selects the wrong site by accident.

The changes you would make to implement this is:

Remove the button code.
Change the SELECT item to include the onChange method to look like:
<SELECT NAME="aaa" SIZE="1" onChange="openURL()">

Using In Frames
If you are using this item in frames, such as in a top navigation frame and you want when an item is select to change the bottom frame, you need to modify the JavaScript section. Let's say the bottom frame name is main you would change the last line in the JavaScript to:

Using in Windows
Using this in a different window is similar to using in frames. Instead of using the keyword top you would specify the name of the window you want the page changed, or you can use other window keywords such as opener which refers to the window that opened the window.

For example if you have a small pop-up window you use for navigation that has the pull-down menu in it and you want it to change the main window that opened this document you would use:

Related Article regarding JavaScript Windows.