March 4, 2021
Hot Topics:

No Button!

  • By Joe Burns
  • Send Email »
  • More Articles »

Script Tip life begins at 40...

Okay! We now know how to get a drop-down menu to react using a button to fire up the function. But what if you don't like the button? Wouldn't it be better to just let the user choose their selection and off they go... sans button? It looks like this:

The Script's Effect

The code looks like this:
<SCRIPT LANGUAGE="javascript">

function LinkUp() 
var number = document.DropDown.DDlinks.selectedIndex;
location.href = document.DropDown.DDlinks.options[number].value;

<FORM NAME="DropDown">
<SELECT NAME="DDlinks" onChange="LinkUp(this.form)" >
<OPTION VALUE="http://www.yahoo.com"> Page One
<OPTION VALUE="http://www.cnn.com"> Page Two
<OPTION VALUE="http://www.earthweb.com"> Page Three


This is a rather easy effect to generate. Notice that the button code has been taken out. The function remains the same, as does the code for the drop- down box itself. Here's the new code that does the trick:

<SELECT NAME="DDlinks" onChange="LinkUp(this.form)"> 

An Event Handler, onChange, is used to fire the function, LinkUp(). onChange works just as you think it does. As soon as something changes, it's triggered. When the page loads, the OPTION SELECTED is the item displayed. Once someone changes that, the function is triggered.

This hasn't come up a lot in the Script Tips, but do you see the text within the instance (the parentheses)? That text is known as a "parameter." In this case, it is information that is going to be passed to the function.

The information passed to the function couldn't be more clear, this.form. The output of the form, the index number of the user's choice, is sent up to the function and used, along with the VALUE, to create the hypertext link just as it was when we had the button.

One more thing -- notice where I placed the onChange Event Handler. It is in the SELECT tag, not the first OPTION tag. That's because the SELECT will change. The first OPTION will always stay the same and never trigger the function.

Easy enough... but will it work across frames?! Sure.

Next Time: Across Frames

This article was originally published on March 12, 1999

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date