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

Ken Ward's Java Script Tutorial ...

[Back to double menu][JavaScript Tutorial]

Double Drop-Down Menus 2

Select a subject and then a page to go!:

Subjects Pages

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.

The explanation that follows is based on the code used in the doublemenu which has a large amount of data removed. The data, titles and filenames is not essential to understanding the menu, and would simply cause unnecessary confusion.

How it works

First of all, there is a form on the page which contains two selects. One of the selects holds the subjects and these are entered manually into it. The other select is rather empty, and is filled with pages, depending on which subject has been selected. Here is the code in the page:

<!-- ####################### copy the code below to where you want the menu to appear ####################### -->

<form name="formDoubleMenuDMA" >

<p><font size="2">Select a subject and then a page to go!</FONT>:<br>

<!-- This menu holds the subjects-->

<select name="menuSubjectsDMA" onChange="changeFilesDMA()">

<option value="none" >Select a subject

<option value="">HTML

<option value="">JavaScript

<option value="">JavaScript 2

</select>

<!-- this menu holds the files to go-->

<select name="menuFilesDMA" onChange="goDMA(this)" style="width:300">

<option value="none"> Pages appear here

</select>

</form>

<!-- ####################### stop copying the menu code (DMA) here ####################### -->

The first select, which holds the subjects (menuSubjectsDMA) has a function, changeFilesDMA(), which is activated when the user changes the selection in the select.

This function is shown below:

function changeFilesDMA(){

//first it defines for itself the selects,

//so it can find what it needs

aMenu=document.formDoubleMenuDMA.menuSubjectsDMA

aMenu2=document.formDoubleMenuDMA.menuFilesDMA

//now it can find out which option has been

//chosen by the user, by going through the

//switch statement.

with (aMenu){

switch (selectedIndex) {

case 0:

aMenu2.options.length=0;

aMenu2.options[0]=

new Option("Pages appear here","none")

aMenu2.options[0].selected=true;

history.go(0)

break

case 1:

MySubjectDMA0(aMenu2)

aMenu2.options[0].text="HTML Subjects"

break

case 2:

MySubjectDMA1(aMenu2)

aMenu2.options[0].text="JavaScript Subjects"

break

case 3:

MySubjectDMA2(aMenu2)

aMenu2.options[0].text="JavaScript 2 Subjects"

break

}

}

}

All this function does is to check which subject the user has selected. For instance, suppose the user has chosen the second option (option 1 because the options start at 0). Here is a snippet of the code:

case 1:

MySubjectDMA0(aMenu2)

aMenu2.options[0].text="HTML Subjects"

With the option number 1, the function calls another function, MySubjectDMA0(aMenu2). This will fill the second select with the pages. Before we discuss this, we will look at the third line. All this does is to set the first option of the Page's select to 'HTML Subjects'. Each subject has a function similar to this to load its pages into the second select.

Now let's look at the function we have just called:

function MySubjectDMA0(aMenu){

nullOptionsDMA(aMenu)

with (aMenu){

//Rewrites the text and values

options[0]=new Option("Select a page","none");

options[1]=new Option("What's in a name - Anchors","../HTMLGuide/anchors.htm");

options[2]=new Option("Background Images - Ken Ward's HTML Tutorial","../HTMLGuide/background_images.htm");

options[3]=new Option("Formatting - HTML Tutorial","../HTMLGuide/Bold.htm");

options[0].selected=true

}

}

This function creates the new options in the second select containing the pages, using JavaScript's new Option(). In the original code there is a great deal of data here, but the additional rows do no more than add further files to the menu. The first thing this function does, however, is to call yet another function, nullOptionsDMA(aMenu), which removes any existing options from the select. If it didn't do this and the previous list was longer than the present one, then the menu would contain some of the old files from the previous subject. So we first of all call this function to clean up the select. This function is:

function nullOptionsDMA(aMenu){

var tot=aMenu.options.length

for (i=0;i<tot;i++)

{

aMenu.options[i]=null

}

aMenu.options.length=0;

}

This function nulls all the options, if there are any, and finally sets the option length to zero. In this way it clears any possible stragglers from the previous list.

So that is about everything about the double menu. All that remains is the function called in the BODY tag:

<body onLoad="setUpDMA()">

This function clears and tidies up the menus when the page loads. In fact, if the menus were written by JavaScript, this function would not be necessary. This function is also important if the user uses the browser's back-button to return to the page. This function is:

function setUpDMA(){

with (document.formDoubleMenuDMA) {

if (menuSubjectsDMA.selectedIndex==0){

menuSubjectsDMA.options[0].selected=true

menuFilesDMA.options[0].selected=true

}

if (menuSubjectsDMA.selectedIndex==1)

MySubjectDMA0(menuFilesDMA)

if (menuSubjectsDMA.selectedIndex==2)

MySubjectDMA1(menuFilesDMA)

if (menuSubjectsDMA.selectedIndex==3)

MySubjectDMA2(menuFilesDMA)

if (menuSubjectsDMA.selectedIndex==4)

MySubjectDMA3(menuFilesDMA)

}

}

What it does is to load the appropriate files in the Pages Select depending on which subject is selected when the page is loaded (of course, it will be zero when the page first loads, but could have other values when the user returns to the page, using the back-button on the browser).

So that's it! The code was written by Double Drop Down Menu Builder, which, in turn, was written to avoid the problems and tedium of doing this task by hand. It comes with the triple-menu builder, each of which have project files, so the menus can be rebuilt with the minimum of trouble (silly mistakes, etc).

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.

 


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

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

I am always pleased to hear from you.
To ask questions, make comments, etc,
use the mailing list : Click here to join 1stJavaScript