Ken Ward's Java Script Tutorial ...

JavaScript Triple Menu

Triple drop down menu 2

 

To explore self development and computer stuff: - choose a topic from the drop-down box on the left, then a subject from the box in the middle. And finally choose a page from the drop down menu on the right.

Select a topic ...

... then a subject ... ... and then a page to go ...

 

Because of the large number of files to handle, the triple menu was written, in part, by Double Drop Down Menu Builder. That is, the code was changed somewhat to create the triple menu. For the sake of this tutorial some of the original default names have been changed for the sake of readability. So the form below is called 'formTripleMenu', but it is called 'formDoubleMenu' in the original code.

The form below has 3 selects which are called:

This appears logical enough! The menu for the topics is already filled in in the page and the other menus are filled in with subjects or files depending on the selection made by the user in the first menu (Topics);

This is achieved by a function called changeSubjects. When the user selects a topic, then depending on which one is selected, the menu containing the subjects is filled in with a list of subjects appropriate to that topic.

First we lay out the options in a case statement. And we specify what will happen when this particular option is selected. When the user selects a topic, the code populates the subject's menu with some subjects. Which subjects it uses depends on which topic has been chosen.

The code achieves this by firstly detecting which topic has been chosen (the code below) and then calling the appropriate function to populate the subjects box (following page).

 

function changeSubjects(){

/* #######################

first we define the menus for easy reference

####################### */

aMenu=document.formTripleMenu.menuSubjects

aMenu2=document.formTripleMenu.menuFiles

aMenu3=document.formTripleMenu.menuTopics

with (aMenu3){

/* That is, with the menu that holds the Topics */

switch (selectedIndex) {

case 0:

/* this the default option, 0 that holds the starting text (Pages appear here) */

/* null off the menu that holds the subjects so previous items are removed */

nullOptions(aMenu)

/* null off the menu that holds the files so previous items are removed */

nullOptions(aMenu2)

aMenu.options[0]=

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

aMenu.options[0].selected=true;

history.go(0)

break

case 1:

//computer stuff

nullOptions(aMenu)

nullOptions(aMenu2)

aMenu2.options[0]=

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

aMenu2.options[0].selected=true;

/* We similarly deal with the next option, but this time we want it to load subjects in

the second menu. We have as many functions to do this as we have topics. So the function MyTopics1 will

handle the subjects for the first topic, and myTopics2 will handle the subjects for the second option, and so on*/

MyTopics1(aMenu)

break

case 2:

//self development

nullOptions(aMenu)

nullOptions(aMenu2)

aMenu2.options[0]=

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

aMenu2.options[0].selected=true;

MyTopics2(aMenu)

break

case 3:

//computer software

nullOptions(aMenu)

nullOptions(aMenu2)

aMenu2.options[0]=

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

aMenu2.options[0].selected=true;

MyTopics3(aMenu)

break;

}

}

}

We specify what to do for a particular option when it is selected with the functions MyTopics1, MyTopics2, etc for each option which we require to make a change.

We explain these function next: Triple Menu 3: Populating the sujbects' menu

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 Ward's HTML Guide...

 

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

I am always pleased to hear from you.
Send your comments to

And for some programming for your brain: check out New Life Course

[an error occurred while processing this directive]