JavaScript Tutorial Go to HTML Guide Free Downloads Download jsEditor Download jsEditor

[Back to previous page] [Next Page in Series]

Ken Ward's Java Script Tutorial ...

Choose a subject in the left-hand menu then choose a page-to-go in the right-hand menu.

Double Drop-Down Menus

This page has a double drop-down menu at the head. It can be very useful for sites with many pages and can quite neatly replace several single drop-down menus.

You can select a subject in the left-hand menu and then choose a page-to-go in the right hand menu. Of course, the right-hand menu updates according to the subject you have chosen.

How it works

Code in the Head

Go here for the code.

Firse we make a menu of subjects:

Menu1Options= new Array;

Menu1Options[0] = "Personal Development";
Menu1Options[1] = "HTML Tutorial";
Menu1Options[2] = "JavaScript Tutorial";

I have called the firs menu Menu1. It has three subjects declared as an array as above.

In your particular case, you may add several more subjects, as I did in the Freeing the Mind page.

function changeListOfPages()
/*This function changes the list of pages-to-go in Menu2, depending on the subject selected in Menu1*/
Menu2Options.length = 0;
Menu1SelectedItem = document.DoubleDropDownMenu.Menu1.selectedIndex;
if (Menu1SelectedItem == null) return;


This is the function that makes the list of pages-to-go  in Menu2. First it determines which subject has been chosen in Menu1. Menu2Options is a new array. It will hold the list of pages-to-go. It is first set to zero. We will say more on this in a moment. First of all we make a variable hold the selectedIndex number of the subject selected in Menu1:

Menu1SelectedItem = document.DoubleDropDownMenu.Menu1.selectedIndex;

Then to avoid an error we check to see if it is null, and if it is we stop the process (return). (Actually, it has to be something as one or other of the options in Menu1 have to be chosen).

There are 3 subjects in our Menu1. Their numbers are 0, 1,2. So we next tell the code what to do depending on what has been selected.

if (Menu1SelectedItem == 0)
/*Personal Development*/

So the next bit of code tells us that if the option is 0, then we are dealing with Personal Development (in Java Script comments).

In this case we fill up the options:

Menu2Options= new Array;
Menu2Options[0] = new Option("Select a Page");
Menu2Options[1] = new Option("Freeing the Mind");

... etc

Next we fill in the option values, after we have declared a new array:

Pages = new Array;
Pages[0] = "";
Pages[1] = "../index.html";

So to sum up, for Menu 2, the description that will appear is "Freeing the Mind" and the URL, in this case, is ../index.html. Because we are using an onChange event to go to the URLs, the first option is "Select a Page". We did this because if one of our URLs had been put here, we couldn't go to it because it wouldn't change. So this is a dummy entry. The corresponding URL is null.

The last part of the function, changeListOfPages, fills the option values of Menu2.

/*Depending on what has been selected, this is the function that loads the pages-to-go into Menu2*/
tot = Menu2Options.length;
for (i = Menu2OriginalLength; i > 0; i--)
{ document.DoubleDropDownMenu.Menu2.options[i] = null; }
/* The above nulls off all the options to allow the subjects to be changed without leaving data in the array from previous, longer lists of files. */
for (i = 0; i < tot; i++)
{ document.DoubleDropDownMenu.Menu2.options[i] = Menu2Options[i]; }
document.DoubleDropDownMenu.Menu2.options[0].selected = true;
/* The above fills the options with the descriptions of the files and makes the first description the selected one. */
Menu2OriginalLength = Menu2Options.length;
/* This makes the value of Menu2OriginalLength correct, if the subjects have been changed. */

Finally, the function:

function gotoPage()
/*This function loads the selected page to go into the browser.*/
i = document.DoubleDropDownMenu.Menu2.selectedIndex;
window.location.href = Pages[i];

sends the Browser to the page the User selects.

The code in the body

The first piece of code writes the beginning of a table to hold the form:

<script LANGUAGE="JavaScript">
with (document) {
writeln('<TABLE BORDER = 0 WIDTH="50%" CELLPADDING = 3 CELLSPACING = 0 bgcolor="lightblue">');
writeln('<TR><TD COLSPAN = 2 ALIGN="center"><FORM NAME = "DoubleDropDownMenu">');
writeln('<FONT SIZE = 3 FACE = "Ariel" >Choose a subject in the left-hand menu then choose a page-to-go in the right-hand menu.</FONT>');
writeln('</TD></TR><TR><TD ALIGN = center>');
writeln('<FONT SIZE = 2 FACE = "Times" >Subjects</FONT><BR>');

We obtain the length of Menu1 from the array and call it 'tot'. Then we write the subjects for Menu1:

writeln('<SELECT NAME="Menu1" onChange="changeListOfPages(this.form)">');
tot = Menu1Options.length;
for (i = 0; i < tot; i++)
writeln("<OPTION>" +Menu1Options[i]);


We finish off the HTML for the table:

writeln('</TD><TD ALIGN="center">');
writeln('<FONT SIZE = 2 FACE = "Times" >Pages</FONT><BR>');

Then we write out Menu2:

writeln('<SELECT NAME="Menu2" ONCHANGE="gotoPage(this.form)">');
/*The next line is a bodge to get the menu to work with Navigator 3)*/

for (i = 0; i < maxLength; i++)
writeln("<OPTION>" +Menu2Options[i]);

We null off all the options from the maximum length to the actual length, so any residual information does not get printed in menus.

for (i = maxLength; i > Menu2OriginalLength; i--)

{ DoubleDropDownMenu.Menu2.options[i] = null; }


We call the function changeList of Pages and load it in memory:


Finally we finish off writing the form and table.


Like much of the stuff in JavaScript, the long bit is filling in all the file details. The code is actually quite simple.

Double drop down menu - click here! You can easily and quickly add a double drop down menu to your site. Click here to find out how.


Ken J Ward
[If you need to learn more about HTML visit the HTML Tutorial]

To ask questions, make comments, etc,
use the mailing list 1stJavaScript