Java menu script>Menu Make>Drop Down Menus

At the top of the page is a drop down menu to some of the articles in this section. You select the article from the drop down menu and press the button to go to the article. Below is the same kind of selecter, but it has only two destinations (so when we look at the code, we don't have to look at lots and lots of options.)

First, let's look at the code in the body:

Body Code

<FORM name=form2>
<SELECT NAME="select2" SIZE="1">
<OPTION VALUE="none" SELECTED>Select a page and go
<OPTION VALUE="alertsText.htm">Text Alerts
<OPTION VALUE="alertsImages.htm">Alerts with images
<OPTION VALUE="alerts.htm">Message Boxes
<INPUT TYPE="BUTTON" NAME="B2" VALUE="Go to Article ..." ONCLICK="goToPage2()">
</FORM>

(If you'd like to learn about select boxes in HTML then go !)

Within a form, we have a select option, which is called select2. Its size is 1 which means that one line only is shown. Why not change the size to 2, and see what happens. There are four options. Each has a value. The first value is "none". This is a code which the Java Script will use to avoid trying to action the value and give an error. The other option values are the locations of the files I want to load when the user selects them. Finally, there is an input type button which is called B2. Its value is "Go to Article �?" Finally, when the user clicks on the button the function goToPage2() is called. We have put the function in the HEAD of the document, to keep it tidy and out of the way.

The

Here is the code for the function:

The Java Script code is enclosed in script tags. The script is hidden from old browsers with the HTML comments. The first line of the function declares and defines a variable:

PageIndex2=document.form2.select2.selectedIndex

The seclect option has a property called selectIndex. This has a value of '0' for the first option and subsequent options have values of 1, 2, etc. We have made the variable PageIndex2 equal to the selectedIndex value of the option. So if the first option is selected, then PageIndex2 will be zero. If the second, 1, and so on. This value is inserted into the next line of code:

if (document.form2.select2.options[PageIndex2].value != "none")

What use is ?

After the if bit, the code tells the Browser which option it is talking about. It starts saying that this document's form called form2 has a select options called select2, and in this, is the option the user has selected, and has a number to identify it. This options value is then indicated to the Browser. Now, on our drop down menu we have one item which we don't want actioning. This is 'Select an option and go.' We give this the value 'none' so we can get our script to ignore it, should the user click on it. So, if the value is 'none', we do nothing (!="none"), and avoid a Java Script error.

So provided the option's value isn't 'none', we apply this code:

location = document.form2.select2.options[PageIndex2].value

We know that PageIndex2 is our shorthand way of saying which option we are talking about, and its value is an URL (if it isn't 'none', when we won't do anything.) So this line of code tells the Browser to load in LOCATION the URL we have specified. Clear as mud?

Opening the page in a

You can open the pages in a new window by modifying the head code above, which is reproduced below. Some other changes had to be made.

//Delete the "location" code

//location = document.form2.select2.options[PageIndex2].value

//Use the following code:

myfile = formNew.selectNew.options[PageIndex2].value;

window.open(myfile,'newwin');
}
}
//-->
</script>

Did you notice how I had to change the form and select names, and the function names to make the code work on this page with the other examples? What would happen if I didn't do this? Well, for one thing with different forms on this page, JavaScript wouldn't know which form or which function I was referring to! It would give all sorts of error messages. If you need to learn about windows, then check out

Try the menu below and see whether it opens the pages in a new window:

While is the expert at menus and contents pages, the can automatically add options with the URL and the TITLE of the file automatically filled in. You can order the jsEditor online and download the full version immediately, so you can use it to help you learn and develop scripts.

Let's look at !