.
Example: Creating "combo link boxes"
A common use of the above knowledge is to create a combo link box, where the selection list acts as a url jumper. Here's an example:
Before we plunge right in, lets first put together all our ideas we've learned in Lesson15 and 16. Recall from Lesson 15, that to access the individual elements, we would write:
document.George.example.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.George2.example.options.selectedIndex
Now, with the above two pieces of code, we are all set to make our combo box script!
<form name="George">
<p><select name="example" 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></p>
<script language="javascript">
<!--
function go()
{
location=document.George.example.
options[document.George.example.selectedIndex].value
}
//-->
</script>
<input type="button" name="test" value="Go!" onClick="go()">
</form>
Pay close attention to how we put together the two pieces of code mentioned earlier:
location=
document.George.example.
options[document.George.example.selectedIndex].value
See, the part in red, the script that returns the index of the element selected, is put inside the script that returns the value of that particular element. Now, since the "red" script is a self updating script that automatically changes index numbers whenever a user selects another element, the "blue" script will in turn always get the value (url) of the element the user has selected.
The above only illustrates one of the many uses of selection lists...the fun of it all is using your creativity with JavaScript and "doing your own thing."
-Tutorial introduction
-Working with selection lists
-Using the options array to access elements within the list
-Properties of the options array itself
-Example: Creating "combo link boxes""