A simple drop-down menu

Ken Ward's Java Script Tutorial …

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:

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

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.

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 none?

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?

Let's look at doing a menu without a button!

The book I use most often as a reference is Danny Goodman's JavaScript Bible. It is the book I would recommend to all serious students of Java Script. You can find out more about the book by clicking on the picture on the right and checking it out at Amazon.com! Or here for Amazon.co.uk for JavaScript Bible in the UK and Europe. Also, check out the recommended books and software page.