A Drop-Down List of Links

A JavaScript Drop-Down List of Links

A number of readers have asked me how I set up the drop-down list at the top of each of my pages. That list uses CGI to process the selected item and send the surfer to the appropriate page when they click Go!. If you'd like to implement the same thing on your pages, you can use JavaScript instead of CGI. This page shows the original version of this technique. I also have a second version that offers some advantages (including the ability to use multiple drop-down lists).

Here's an example list to try out:

To set this up, first create a form and add a <SELECT></SELECT> combo to start a selection list. Be sure to name this control "url", like so:

<FORM>
<SELECT  NAME="url" WIDTH=20>
</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 --->

Finally, add a command button to the form, and set its JavaScript onClick attribute:

<INPUT TYPE=BUTTON VALUE="Go!" onClick="JumpToIt(this.form)">

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(frm) {
    var newPage = frm.url.options[frm.url.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)