You have seen that we can use a drop down menu, with a button or without one, to send the browser to an URL, send email, load images, open pages in new windows, etc. You can also use a menu to create a menu. This is important code to help you understand, among other things, double-menus and triple menus. If you understand about menus, then this page will be easy to understand.
Below are two menus: one menu contains a list of subjects, and the second on populates with pages when a subject has been selected in the first menu. At first, there is only one item in the second menu, which invites you to select a subject.
Try out the menus below and see how they work
Menu 2, below, holds the pages related to the selected subject in menu 1.
The first menu, the subjects' menu, is a regular menu which is pre-written in the page. The second menu is a regular menu with only one item - the one that says, "Select a page after selecting the subject". The user selects a subject in the first menu and the second menu populates with page names (at most 4, because I have tried to minimise the details to make the code easier to understand).
When the user selects an item in the first menu, the menu calls a function called "ldMenu(this.selectedIndex):
<
select name="select1" onChange="ldMenu(this.selectedIndex);" size="1">
The select, therefore, calls the function and tells the function which item has been selected. The function begins as follows:
The above bit simply introduces a variable called "Indx". We also establish which item we are talking about. The function uses a "with" statement to tell JavaScript that we are talking about "document.form2.select2" throughout.function
ldMenu(mySubject) {Indx=mySubject;
with (document,form2.select2)
{
The next bit of code is used to clear the menu items, so that none are left from the previous selection (if any). The length of the options is made zero:
Next, we find out the value of Indx, by checking the possibilities. If the Indx value is "0", then we write one option, "Pages appear here".document.form2.select2.options.length=0;
if (Indx==0)
{
options[0]=new Option("Pages appear here","");
}
To write the new option, we use, surprisingly "new Option(". The first bit in the brackets is the text that appears in the menu, and the second is the value of the item. In this case, the value is "", or nothing. When the user clicks here, nothing happens, which is what we want.
The next piece of code deals with the case when "Indx" is one. That is, the subject is "JavaScript". The code we use to handle this is:
if (Indx==1){
options[0]=new Option(
"Choose a JavaScript Page","");options[1]=new Option(
"Alerts","alerts.htm");options[2]=new Option(
"Back and Forward Buttons","BackForward.htm");options[3]=new Option(
"Contents","index.html");}
In this code, the new options (after the first) have values which are the names of web pages. The remaining if statements in the function follow the same pattern as this, setting the items to the appropriate subjects.
When the user selects one of these, the second menu, menu 2, calles the function "goToPage()", from the second select (select2):
onChange=
"goToPage()"
"goToPage()" is a function to send the user to the selected page. It is just like any other function in a drop-down menu. The function is:
<script language=
"JavaScript"><!-- Hide from old browsers
//Hide from Java Script
function
goToPage(){
PageIndex2=document.form2.select2.selectedIndex
if (document.form2.select2.options[PageIndex2].value !=
""){
location.href = document.form2.select2.options[PageIndex2].value;
}
}
//-->
</script>
You will note that this function only works if there is a value in the option. So if the first option is selected, nothing happens, because it is nothing ("").
As it stands, the above code works fine in IE, and reasonably in Opera (it does not change the size of the select when new items are selected.) Netscape, however, requires "refreshes" to make the changes on the page. The following code is required to refresh the browser if it is "Netscape You need to use this code whenever you want to make changes in the menus. (Version 7, however, does not require this code.)":
if (navigator.appName == "Netscape") {
history.go(0)
}
To write to a menu from another menu, you need only use "new Option(" to create the menu items. While I have used "if statements" to find out which item has been selected, you might prefer to use a "case statement".