Free Access! Your Technology Information Source

If the site is too slow, use one of our mirrors:  MIRROR 1  |  MIRROR 2

Navigation FAQ

Links from Drop Down List Boxes

In FrontPage Editor HTML View you can Copy & Paste the code below into your page. Change the Form Field Properties or modify the scripts to suit your needs.

NOTE: Because JavaScript works with both Internet Explorer and Netscape, this is the preferred method.  The VBScript only works in Internet Explorer. Netscape browsers require a plugin that is available for purchase, which not installed by most users.

JavaScript Example with Go Button

<form name="ListBoxForm">
<p><select SIZE="1" NAME="ListBoxURL">
   <option value="http://www.free-access.org">Free Access</option>
   <option value="http://www.microsoft.com">Microsoft</option>
   <option value="http://www.netscape.com">Netscape</option>
</select> <input TYPE="button" VALUE="Go" ONCLICK="gotoLink(this.form)" NAME="button"> </p>
<script language="JavaScript">
<!--
function gotoLink(form) {
   var OptionIndex=form.ListBoxURL.selectedIndex;
   parent.location = form.ListBoxURL.options[OptionIndex].value;}
//-->
</script>
</form>

FRAMES NOTE: You can change the parent.location in the above code to this.location to open the page in the same frame.   You can also specify the target frame using parent.FrameName.location.

Back to Top

JavaScript Example without Button

<form name="AutoListBox">
<p><select name="ListBoxURL" size="1" language="javascript" onchange="gotoLink(this.form);">
   <option value="http://www.free-access.org">Free Access</option>
   <option value="http://www.microsoft.com">Microsoft</option>
   <option value="http://www.netscape.com">Netscape</option>
   <option selected>Show me the way...</option>
</select></p>
<script language="JavaScript">
<!--
function gotoLink(form) {
   var OptionIndex=form.ListBoxURL.selectedIndex;
   parent.location = form.ListBoxURL.options[OptionIndex].value;}
//-->
</script>
</form>

FRAMES NOTE: You can change the parent.location in the above code to this.location to open the page in the same frame.   You can also specify the target frame using parent.FrameName.location.

Back to Top

JavaScript Example using IF, ELSE IF & ELSE
<script language="JavaScript">
<!--
function setaction(jumpto){
   if (jumpto == 0) location.href = "example1.htm";
   else if (jumpto == 1) location.href  = "example2.htm";
   else location.href  = "http://www.free-access.org";
}
// --></script> </p>
<form method="POST">
<div align="left">
<select name="dest" size="1">
   <option>Example One</option>
   <option>Example Two</option>
   <option>Really, Do Not Use This!</option>
</select>
<input TYPE="BUTTON" VALUE="Goto Link" ONCLICK="setaction(form.dest.selectedIndex)">
</div>
</form>

FRAMES NOTE: You can change the location.href in the above code to this.location to open the page in the same frame.  You can also specify the target frame using parent.FrameName.location.

Back to Top

JavaScript Example that can be used with Frames

<form name="menuform">
<p><select name="section" size="1" width="200" language="javascript"
onchange="goto_page();">
   <option selected value="Show me the way...">Show me the way...</option>
   <option> - - - - - - - - - - - - - - - - - </option>
   <option>Microsoft.com</option>
   <option>FrontPage Home Page</option>
   <option>FrontPage Support Page</option>
   <option>Microsoft Office Home Page</option>
   <option>Microsoft Windows 95 Home Page</option>
   <option>Microsoft Windows NT Home Page</option>
   <option>Microsoft IIS Home Page</option>
</select></p>
</form>
<p><script language="JavaScript"><!--
function goto_page() {
   if (document.menuform.elements[0].selectedIndex == 0)
      window.parent.self.status=" Goes Nowhere";
   else if (document.menuform.elements[0].selectedIndex == 1)
      window.parent.self.status=" Goes Nowhere";
   else if (document.menuform.elements[0].selectedIndex == 2)
      window.open("http://www.microsoft.com", target="_top")
   else if (document.menuform.elements[0].selectedIndex == 3)
      window.open("http://www.microsoft.com/frontpage", target="_top");
   else if (document.menuform.elements[0].selectedIndex == 4)
      window.open("http://www.microsoft.com/support/frontpage",target="_top");
   else if (document.menuform.elements[0].selectedIndex == 5)
      window.open("http://www.microsoft.com/Office", target="_top");
   else if (document.menuform.elements[0].selectedIndex == 6)
      window.open("http://www.microsoft.com/Windows95", target="_top");
   else if (document.menuform.elements[0].selectedIndex == 7)
      window.open("http://www.microsoft.com/WindowsNT", target="_top");
   else if (document.menuform.elements[0].selectedIndex == 8)
      window.open("http://www.microsoft.com/IIS", target="_top");
}
// --></script> </p>

Back to Top

VBScript Example
(Netscape requires Plug-in)

<form method="POST" name="SendMe">
<p><select name="DropIt" size="1">
   <option>http://www.free-access.org</option>
   <option> http://www.microsoft.com </option>
   <option> http://www.microsoft.com/frontpage </option>
   <option> http://www.microsoft.com/support/frontpage </option>
</select>
<input type="button" name="B1" value="Go"> <script FOR="B1" EVENT="onClick" LANGUAGE="VBScript">
select case document.sendme.dropit.selectedindex
   case 0
      navigate("http://www.free-access.org")
   case 1
      navigate("http://www.microsoft.com")
   case 2
      navigate("http://www.microsoft.com/frontpage")
   case 3
      navigate("http://www.microsoft.com/support/frontpage")
end select
</script> </p>
</form>

Back to Top

VBScript Example
(Netscape requires Plug-in)

<form method="POST" name="SendMe2">
<p><select name="Cleaner" size="1">
   <option value="http://www.free-access.org">http://www.free-access.org</option>
   <option value="http://www.microsoft.com">http://www.microsoft.com</option>
   <option value="http://www.microsoft.com/frontpage"> http://www.microsoft.com/frontpage </option>
   <option value="http://www.microsoft.com/support/frontpage"> http://www.microsoft.com/support/frontpage </option>
</select> <input type="button" name="B2" value="Go"> <script FOR="B2" EVENT="onClick" LANGUAGE="VBScript">
dim choice
   choice = document.SendMe2.Cleaner.selectedindex
    navigate document.SendMe2.Cleaner.options(choice).value
</script> </p>
</form>

Back to Top

Active Server Page Tutorial

For an Active Server Page (ASP) Tutorial using List Boxes see Forms - List Boxes (by John Kauffman & Charles Carroll) at ActiveServerPages.com

This page is based in part upon Microsoft's Q167594 Knowledge Base Article. Modifications have been made to ensure compatibility with Netscape browsers.