Page Contents:
Body Code
Head Code
Using "none"
Opening the Page in a New Window

Ken Ward's Java Script Tutorial ...

A simple drop-down menu

Message Boxes Text Alerts Alerts with images Jumping with a form button Confirming Options More on the Confirmation Message Box Hello and Goodbye Messages Example of Hello and Goodbye Page Prompting for User Input Example of Prompting for Input Writing with Java Script Writing where you like Opening new Windows Opening new Windows 2 Using Hyperlinks in New Windows Contents of Java Script Tutorial Select a page and go!   

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

Select a page and go Text Alerts Alerts with images Message Boxes

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

Body Code

<form name="form2" id="form2"action="" > <select name="select2" size="1"> <option value="none" selected="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" id="B2" value="Go to Article ..." onclick="goToPage2()" /> </form>

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

Opening the page in a new window

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.

<script type="text/javascript"> <!-- Hide from old browsers //Hide from Java Script function goToPageNew() { PageIndex2=document.formNew.selectNew.selectedIndex if (document.formNew.selectNew.options[PageIndex2].value != "none") { //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 New Windows.

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

Select a page and go Text Alerts Alerts with images Message Boxes