Javascript issue - linking drop down list box to urls

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
blkshirt
Forum Newbie
Posts: 11
Joined: Sat Dec 06, 2003 8:40 pm
Location: Ohio

Javascript issue - linking drop down list box to urls

Post by blkshirt »

Here's the little problem I have facing me...

I have a webpage that will have frames in it... There will be a top and left frame with a main area for placing html files. However the top and left frames will be static while the main area will change.

If I place a drop down list box on the left frame and it looks something like this:

Code: Select all

<form name="dropdownlist1" method="post" action="">
  <select name="select" size="1">
    <option>Select an Event</option>
    <option>100M Dash (P)</option>
    <option>100M Dash (F)</option>
    <option>200m Dash (P)</option>
  </select>
</form>
How do I get each event to relate to a specific html file and show that html file that has been selected by the user to show up in the main page area? I've been told I should do this using javascript however I haven't been able to find exactly what I'm looking for. I did find an example of it here but I've tried looking at the source code and I was just confused...

Thanks for your help!

blkshirt
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post by Gen-ik »

In your <frameset> you will need to give each of your <frames> a name or id... let's call them Top, Left and Main for now.

You can use the following code in any of the frames you want but it will change the contents of Main when an option is selected from the <select> menu.

Code: Select all

<form>
<select onchange="window.top.frames.Main.location=this.value">
<option value="pageOne.htm">Go to pageOne</option>
<option value="pageTwo.htm">Go to pageTwo</option>
</select>
</form>
User avatar
Pyrite
Forum Regular
Posts: 769
Joined: Tue Sep 23, 2003 11:07 pm
Location: The Republic of Texas
Contact:

Post by Pyrite »

Very nice Gen-ik. I had always used an external javascript function to do that.
Post Reply