Categories:
Partners
Web Hosting
We've partnered with HostGator for reliable, affordable hosting starting at $3.95/mon. Use coupon code "javascriptkit25" for 25% off any package.

Example: Creating  a combo link box

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."

Copyright 1997-2014 JavaScript Kit. NO PART may be reproduced without author's permission.