Combo Link Boxes
-
How
Combo Link Boxes look on a web page
-
How
to create combo link boxes using JavaScript
Let us see an example. If we must choose from
four cases, we can present them this way:
Using Java Script they can be written as follow:
<form
name="name_form">
<select name="name_select" size="1">
<option>choice1</option>
<option>choice2</option>
<option>choice3</option>
<option>choice4</option>
</select>
</form>
To access anything within this selection list, we
would write:
document
. name_form . name_select
Using the above list as an example, with values
added in for each element:
<form
name="name_form">
<select name="name_select" size="1">
<option value="1">choice1</option>
<option value="2">choice2</option>
<option value="3">choice3</option>
<option value="4">choice4</option>
</select>
</form>
JavaScript gives us access to the individual
elements (choice1, choice 2, choice 3 etc) by using the options array.
An array is a series of variables all with the same name, but with different
index numbers. Lets assume we want to access the first element of this
selection list:
document.name_form.name_select.options[0]
//gives us access to element
"choice1"
This will give us direct access to the first element
of the selection list.
To access the third element, we would do this:
document.name_form.name_select.options[2]
//gives us access to
element "choice3"
If we want to alert the name of the first element
(in this case, the name is "choice1"):
onClick="alert(document.name_form.name_select.options[0].text)"
If we want to know the value that's associated with
this element:
onClick="alert(document.name_form.name_select.options[0].value)"
-
Properties
of the options array itself
We know how to access each
of the elements within the selection list, but only by hard-coding the
index number into the script. For example, we still have no way of telling
our script to alert the value of each element, depending on what he/she
has selected. We will now proceed to learn how we can have scripts automatically
update itself whenever a different selection is made by the user, and see
some practical uses of this.
ments of the options array, NOT
the options array itself.
Here are the properties we have used already:
Properties
of the elements of the options array:
properties
text
value |
|
description
returns the actual text (name) of the element
returns the value of the element |
Properties
of the options array itself:
properties
length
selectedIndex |
|
description
tells us the number of elements within this selection
list
tells us the index number of the selected option |
Using the above table, to use the properties, we
would do the following:
document.formname.selectionname.options.property
Using the length property, we can see how many elements
are in the selection list:
alert(document.name_form.name_select.options.length)
It alerts "3", since there are three
elements in the list.
The selectedIndex property informs the index number
of the element selected, and updates itself whenever a new selection is
made.
Make a selection:
onClick="alert(document.name_form.name_select.options.selectedIndex)"
The selectedIndex property updates itself if you change elements, so
if you had selected "choice1", it alerts "0" (since array indexes start
at 0), if you than changed and selected "choice2", it will alert "1" instead.
A common use of the above knowledge is to create
a combo link box, where the selection list acts as a URL jumper. To access
the individual elements, we would write:
document.name_form.name_select.options[x]
where "x" is the index number of the element.
Also recall from what we've just mentioned, that
the selectedIndex property of the options array returns the index of the
element that's currently selected:
document.name_form.name_select.options.selectedIndex
Now, with the above two pieces of code, we are all
set to make our combobox script!
<form name="name_form">
<select name="name_select" size="1">
<option value="http://www.cnet.com">choice1</option>
<option value="http://www.cnn.com">choice2</option>
<option value="http://www.geocities.com">choice3</option>
</select>
<script language="javascript">
<!--
function name_function()
{
location=document.name_form.name_select.options[document.name_form.name_select.selectedIndex].value
}
//-->
</script>
<input type="button" name="test" value="Click Here!" onClick="name_function()">
</form>
Pay close attention to how we put together the two
pieces of code mentioned earlier:
location=document.name_form.name_select.options[document.name_form.name_select.selectedIndex].value
<HTML>
<HEAD>
<TITLE>Combo Link Box</TITLE>
</HEAD>
<BODY>
<FORM method="POST" name="name_form">
<SELECT name="name_select" size="1">
<OPTION selected value="http://www.cnet.com">Cnet</OPTION>
<OPTION value="http://www.cnn.com">CNN</OPTION>
<OPTION value="http://www.geocities.com">Geocities</OPTION>
</SELECT>
<SCRIPT
language="javascript">
<!--
function name_function()
{
location=document.name_form.name_select.options
[document.name_form.name_select.selectedIndex].value
}
//-->
</SCRIPT>
<INPUT type="button" name="name_button"
value="GO!"
onclick="name_function()">
</FORM>
</BODY>
</HTML>
|