JavaScript triple drop down menu using selects: setting up the form

Below is a javascript triple drop down menu that can also be seen on the main site page, where it is used appropriately The first of the three drop down menus gives options of selecting from three subjects: Computer Stuff, Self Development and Computer Software.

When one of these three options is selected the middle menu gives a list of subjects appropriate to that topic. When a subject is chosen from the list of subjects then a list of available pages appears in the last box. The user can then select a page, and go to that page. In the box above there is fast access to several hundred files! The user can get to any file within 3 clicks. This is a magic number for usability experts! It is the maximum distance (in user clicks) that a site should have. The actual use of the triple menu as a navigational device is limited in most sites that can provide closer access to files by using double or single drop down menus. Multiple drop down menus or selects can organise a great deal of data in a user friendly way. However, no technology should be used merely for the sake of it!

In this case, the triple is used appropriately (on the main page) because the site contains a number of distinct subjects. Here it is used as a demonstration of multiple menus, so it is also appropriate!

How it works

See using a menu to write a menu, which explains some of the basic things in creating menus that write other menus.

The JavaScript triple drop down menu begins with a list of what I called topics which are written in the first menu of the form in the normal way. At this stage the other menus are empty except for the first item of text, for example, 'Select ...'. When the user chooses a topic, then the next menu is filled in depending on the topic chosen. So if computer stuff is selected, then the next menu is filled with subjects such as 'JavaScript', 'HTML', etc.

All this time the last menu remains empty. We don't know what to put in it until the user selects a subject.

When the user selects a subject, then we fill the last menu with a list of files.

So if the user has selected computer stuff in the first menu, and JavaScript in the second menu, we populate the last menu with a list of JavaScript pages.

Had the user taken a different tack and selected self development and chosen communication in the subjects menu, we would supply him or her with a list of files appropriate to that subject.

In the example menu, there are 3 topics. There are about 13 subjects and each subject has a few or a lot of files which add up to about 200 different pages (I imagine. I haven't counted!). So the triple menu has the possibility of organising quite a lot of information and presenting it to the user so that within 3 clicks the user can reach any page on the site.

For the first menu, there is an onChange event that changes the items in the second menu. So the topics menu changes the items in the subjects menu.

The second menu, the subjects menu, has an onChange event that changes the items in the last menu. The subjects menu changes the list of files in the files menu.

Finally, the files or pages menu has an onChange event that opens the page selected by the user.

Changes in the topics menu do not affect the files menu. They affect only the subjects menu. Similarly changes in the subjects menu do not affect the topics menu. They affect only the files menu. And, at the end, changes in the files menu do not affect the other menus. Changes here open the appropriate page selected by the user.

The form code

The code for the triple menu for this page is actually in a js file because this does not confuse search engines and does not clutter up the actual page. The who code is shown in an html file in the code page.

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.

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);

<!-- ####################### copy code below into body

#### -->

<tr>

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.

</font>

</strong>

</td>

</tr>

<tr>

<p>

<small>

Select a topic ...

</font>

</strong>

</small>

</td>

<small>

... then

a subject ...

</font>

</strong>

</small>

</td>

<small>

... and

then a page to go ...

</font>

</strong>

</small>

</td>

</tr>

Topics appear here

</option>

Computer Stuff

</option>

Self Development

</option>

Computer Software

</option>

</select>

</td>

Subjects appear here

</option>

</select>

</td>

Pages appear here

</option>

</select>

</td>

</tr>

</table>

</form>

So we have the basis for the menu, the mere skeleton, for JavaScript to work on.

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 ...

Ken Ward's Java Script Tutorial ...

JavaScript Triple Menu

Triple drop down menu

How it works

The form code

Ken Ward's HTML Guide...