Creating a combo box that jumps to a URL upon selecting
In this final section of our tutorial, we'll see how to implement a rather jumpy add-on to a combo box- the ability to go to the specified URL in a combo box simply upon selecting it. The secret to making this happen lies in the onChange event handler. The onChange event handler is inserted inside the select tag, which reacts to the surfer changing the selection inside the combo box. Let's
modify our old combo box so it jumps to a url this way. The revision is highlighted in red:
<form name="George">
<p><select name="example" size="1" onChange="go()">
<option value="http://www.cnet.com">Cnet</option>
<option value="http://www.cnn.com">CNN</option>
<option value="http://www.geocities.com">Geocities</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>
As you can see, all we really did here is add a onChange event to the select tag, which causes
function go() to react as soon as the selection in the combo link box changes. Now, we still need
the "Go!" button in this case. The onChange event handler only reacts if the selection has changed.
If the user wants to go to the initially selected element, the"Go!" button has to be pressed.
In this tutorial, we've learned how to implement many of the little "gadgets" commonly used with existing combo boxes. Regardless of how you implement a combo box, bear in mind that it is only compatible with NS 3+, and IE 4+. It is NOT compatible with IE 3.x nor NS 2.x, due to the fact that these browsers do not support the options property required to access the individual entries in a <select> tag.
-Tutorial introduction
-A quick overview of the syntax of a combo link box
-Creating a combo box that loads the target URL in another frame
-Using an image instead of a form button as the "go" button
-Creating a combo box that jumps to a URL upon selecting