A Drop-Down List of Links, Version 2

A JavaScript Drop-Down List of Links, Version 2

This version of the drop-down list of links offers two advantages over its predecessor:

No command button is required. The user is whisked to the new page as soon as they select it from the drop-down list.
You can place as many drop-down lists on your page as you want.

Here's an example to try out:

To set this up, first create a form and add a <SELECT></SELECT> combo to start a selection list:

<FORM>
<SELECT WIDTH=20 onChange="JumpToIt(this)">
</SELECT>
</FORM>

For each item in the list, create an <OPTION> tag with the following format:

<OPTION VALUE="url">Item text

Here, url is the full URL of the page and Item text is the text that appears in the list (so it could be the name of the page or a brief description). Here's an example:

<OPTION VALUE="http://www.mcfedries.com/">Home Page

I set up the first item with an instruction to the reader (Select a page from this list --->). If you want to do this as well, make sure you set the VALUE of this item to "None", like this:

<OPTION VALUE="None">Select a page from this list --->

With your form set up, the last piece of the puzzle is the JavaScript itself. Add the following code (that is, everything between and including the <SCRIPT> and </SCRIPT> tags) to the header of your page:

<SCRIPT LANGUAGE="JavaScript">
<!--
function JumpToIt(list) {
    var newPage = list.options[list.selectedIndex].value
    if (newPage != "None") {
        location.href=newPage
    }
}
//-->
</SCRIPT>

Loading a Page Into a Frame

If you're using frames, you need to make a slight adjustment to this script in order to load the new page into the appropriate frame. Specifically, you need to modify the location.href property to parent.FrameName.location.href, where FrameName is the name of the frame in which you want your pages loaded. For example, suppose your frame is named Content. Here's the line you'd use:

    parent.Content.location.href=newPage

Resetting the List When It's In a Frame

Many people don't like the fact that after the user selects an item from the list in a frame, the list stays on that item after the new page is loaded in the other frame. To fix this, add the following statement after the parent.FrameName.location.href=newPage statement:

parent.ListFrame.location.reload()

Change ListFrame to the name of the frame that contains the list. For example, if the list's frame is named "Navigation", your new function will look like this:

<SCRIPT LANGUAGE="JavaScript">
<!--
function JumpToIt(list) {
    var newPage = list.options[list.selectedIndex].value
    if (newPage != "None") {
        parent.Content.location.href=newPage
        parent.Navigation.location.reload()
    }
}
//-->
</SCRIPT>

The reload() method does what you'd expect: it reloads the page, which means the drop-down list returns to its default selection.

Opening the Page In a New Window

Finally, if you'd prefer to have to selected page open in a new window, replace the following line:

    location.href=newPage

with this

    window.open(newPage)