Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Using a Select List for Navigation

Navigate to:

An HTML Select list is a form control used to create a drop-down list of items from which the user can select. Each item in a select list is defined by an option element. When the user selects one of the items in a select list, an onchange event is triggered. The selectedIndex property of the list will then contain the index of the item that the user selected. Select list option indexes start with 0 for the first item.

You can use a select list as a navigation element by setting each option element's value attribute to the URL of a web site or web page. Then use the select list's onchange event to execute a function that sets the browsers location object to that URL. Example code for a navigation drop-down list is shown below.

<script type="text/javaScript">

function gotoPage()
{
  var list = document.myForm.mySelect;
  location.href = list.options[list.selectedIndex].value;
}

</script>

<form name="myForm">
<select name="mySelect" onchange="gotoPage()">
<option value="http://www.ftc.gov">Federal Trade Commission</option>
<option value="http://en.wikipedia.org">Wikipedia</option>
<option value="http://www.w3.org">World Wide Web Consortium</option>
</select>
</form>

Note that the example code above causes the document in the browser window to be replaced, while the example select list navigation element at the top of the article causes the document to be opened in a new window. I did this so you would not need to naviage back to this page to return to the article. If this is what you want to do also, the code for that is shown below.

<script type="text/javaScript">
function gotoPage()
{
  var list = document.myForm.mySelect;
  var specs = "fullscreen=yes,location=yes,menubar=yes,resizable=yes,scrollbars=yes,status=yes,titlebar=yes,toolbar=yes";
  var win = window.open(list.options[list.selectedIndex].value,"",specs,true);
}

More Java Script Code:
• Calculators For Your Web Site
• Prototype Keyword Gives JavaScript Object Oriented Inheritance
• Play Music on Your HTML5 Web Page
• A Brief Introduction to HTML for JavaScript Programmers
• Code for Java Script Circle/Sphere Calculator
• Easy Moving Popup Code
• Easy Picture Zoom Code
• Submit Forms Without CGI
• Disable IE8 Accelerators on Your Website
• Easy Slide Show Code With Linked Slides

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2019 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268