|
CodingForums
Having trouble with scripting? Visit our help forum to get the answers you need.
This is a 
|
|
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 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 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.
|
