A selection list is similar to a group of radio buttons – a user can select an option from the several available. People use a selection list in place of radio buttons when the number of options is large. But the real power is attained by manipulating the selection list via JavaScript.
JavaScript allows us to add and remove elements from selection lists dynamically. We can also make decisions on the basis of current selection. The lines that follow will explain the implementation of a JavaScript based navigational menu. The visitor is displayed a drop down selection list and taken to a related page when a selection is made.
Ground Work
We will start with a simple example before jumping to the targeted code. First of all, let’s review the syntax used to make an HTML selection list (no JavaScript involved):
<form name="example">
<select name="numbers">
<option>Number 1
<option>Number 2
<option>Number 3
<option>Number 4
<option>Number 5
</select>
</form>
The above code will create a drop down selection list having 5 options available: Number 1 to Number 5. We have a left a lot of
optional things; assuming that you know this stuff.
Getting Into It
Now let’s write a function that tells you what number you have selected from this
list. Keep in mind the JavaScript hierarchy: a selection list is contained in a form which in turn is contained in the document object. The following function, Say(), is invoked whenever a button is clicked. This function checks the current selection and displays an appropriate message.
function Say()
{
switch (document.example.numbers.selectedIndex)
{
case 0: alert ("One"); break;
case 1: alert ("Two"); break;
case 2: alert ("Three"); break;
case 3: alert ("Four"); break;
case 4: alert ("Five"); break;
default: alert ("Error"); break;
}
}
Selection Object
The selection object used above is named “numbers” and its defined in a form named “example”. From JavaScript we can access and manipulate the selection list using document.example.numbers.
propertyName. One of the properties of the selection list is
selectedIndex, which gives the number of the selected item.
Like C++ and Java, arrays in JavaScript start with 0 index. This means that the first item is numbered 0 and the last one
n-1.
Switch Statement
Switch statements are a way to avoid cumbersome multiple if-then-else constructs. In the above example we have to take 5 different actions depending on the 5 different values of the selected item. We can handle that by using something like
if (document.example.numbers.selectedIndex == 0)
{ do something }
else if (document.example.numbers.selectedIndex == 1)
{ do something else}
....
As you can see switch statements are a neat way to handle the same situation. The
switch keyword is followed by a variable enclosed in a pair of parenthesis. The various available choices are written using a
case keyword followed by some statements and then a
break; statement.
For example,
case 0: alert (“One”); break; says “if the value of the variable is 0 then show a message saying ‘One’.” A
default keyword is used to do stuff when all the
case statements fail.
Moving Up To The Goal
Now that you now how to create and manipulate the
selection lists, you can easily make a navigational menu. Display a list of choices for different pages and go to a page depending on the value of selectedIndex.
Say we have three pages titled “Earn Money”, “Get A Free CD” and “Listen To Songs”. Further suppose that the names of these pages are
money.html,
cd.html and
mp3.html. If you have understood the above discussion, you can easily comprehend the code that follows:
<html>
<head>
<title>"JavaScript Selection List"</title>
</head>
<body>
<form name="example">
<select name="pages">
<option>Earn Money
<option>Get A Free CD
<option>Listen To Songs
</select>
<input type="button" value="Go!" onClick="go()">
</form>
</body>
</html>
The only thing that may need explanation is
window.location.href. The
window object is the highest object in JavaScript hierarchy. It contains the
location object along with others like the
document object. We can go to a different web page by changing the
href property of
location object. For example, to go to Yahoo! we can write
window.location.href=”http://wikiwebpedia.com“
I have tried to explain the things in most natural manner. However, because of working with computers for a long time, people like me sometimes use jargons and take it for granted that the other person knows this. If there is anything like that, or you have a problem related to selection lists, please don’t hesitate to ask a question in the discussions area.
A selection list has a property named
selectedIndex, which gives the number of the selected item in the list. The first item is numbered zero and the next is numbered one and so on.
A switch statement is used to handle multiple if-then-else efficiently.
The window object is the highest in
JavaScript hierarchy. All other objects are contained in it.