Categories:

Creating a combo menu 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:

<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 type="text/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.