Drop-down Sample Code

Here is the code used for the drop-down listbox menu. Notice we do use the FORM tag but are not including the INPUT tag, thereby we are not specifying any method or action to take place when the form is submitted. Instead you will notice in the SELECT tag we have included the drop-down listbox menu event, ONCHANGE, which has been set equal to our JavaScript function, changePage().

<form>
  <SELECT NAME="WebMenArchive" ONCHANGE="changePage(this.form)" >
    <OPTION VALUE="" SELECTED>Select Web Men Archive!
    <OPTION>June 9, 1997
    <OPTION>May 27, 1997
    <OPTION>May 12, 1997
    <OPTION>April 25, 1997
    <OPTION>March 27, 1997
    <OPTION>Febrary 27, 1997
  </SELECT>
</form>

Here's the "automagical" stuff, well not really, it is just a simple JavaScript function which we call changePage():

<SCRIPT LANGUAGE="JavaScript">
<!--
function changePage(theform) {
 num= theform.WebMenArchive.selectedIndex;
 if (num==1) {
   site = 
   "http://www.microsoft.com/workshop/essentials/webmen/webmen0609.asp";
 }
 if (num==2) {
   site = 
   "http://www.microsoft.com/workshop/essentials/webmen/webmen0527.asp";
 }
 if (num==3) {
   site = 
   "http://www.microsoft.com/workshop/essentials/webmen/webmen0512.asp";
 }
 if (num==4) {
   site = 
   "http://www.microsoft.com/workshop/essentials/webmen/webmen0425.asp";
 }
 if (num==5) {
   site = 
   "http://www.microsoft.com/workshop/essentials/webmen/webmen0327.asp";
 }
 if (num==6) {
   site = 
   "http://www.microsoft.com/workshop/essentials/webmen/web-men0220.asp";
 }

 parent.mainfrm.location.href=site;
}
//-->
</SCRIPT>

This JavaScript function takes one parameter, theform, which is set equivilant to this.form passed via the SELECT tag. The function then uses this parameter to find the index value of the selected item. Which is then used to determine what URL will be used in the final statement, where we set the target frame's href.