Using a Select List for Navigation
By Stephen Bucaro
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 Website : Fahrenheit to Celsius Converter
• Regular Expressions Intervals
• Regular Expression Position Matching
• Sams Teach Yourself HTML5 in 10 Minutes
• Java Script to Get Selected Item from Drop-down Select List
• Password Protection Using the Frames Method
• Replace Drop-down with Drag-and-drop
• Java Script Code to Move Items Between Select Lists
• Java Script to Get Selected Item from Select List Option Group
• JavaScript Variable Scope
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
