Javascript issue - linking drop down list box to urls

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:

---

<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

Here is one way:

Code:

---

<form name="frmEvent">
  <select name="select" size="1" onChange="document.location = this.options[this.selectedIndex].value">
    <option>Select an Event</option>
    <option value="http://www.yahoo.com">100M Dash (P)</option>
    <option value="http://www.google.com">100M Dash (F)</option>
    <option value="http://www.realisticgraphics.com">200m Dash (P)</option>
  </select>
</form>

---

or (only slightly shorter):

Code:

---

<form name="frmEvent">
  <select name="select" size="1" onChange="location.href = this.value">
    <option>Select an Event</option>
    <option value="http://www.yahoo.com">100M Dash (P)</option>
    <option value="http://www.google.com">100M Dash (F)</option>
    <option value="http://www.realisticgraphics.com">200m Dash (P)</option>
  </select>
</form>

---