Creating combo link menus
In this tutorial on the
select element, we'll look at how to create a combo link menu, plus popular
variations of it, such as one that navigates to a URL simply by selecting it
from the list of options, one that uses an image as the "go" button etc.
 A quick overview of the syntax of a
combo link box
Before we start diving in, its appropriate to first show the
code of the original combo link box we put together in the tutorial
Accessing the Select element. This is the code
we will be building upon as we renovate our combo with various add-ons:
<form name="mycombo">
<p><select name="example" size="1">
<option value="http://www.javascriptkit.com">JavaScript Kit</option>
<option value="http://www.codingforums.com">Coding Forums</option>
<option value="http://www.dynamicdrive.com">Dynamic Drive</option>
</select></p>
<script type="text/javascript">
<!--
function go(){
location=
document.mycombo.example.
options[document.mycombo.example.selectedIndex].value
}
//-->
</script>
<input type="button" name="test" value="Go!" onClick="go()">
</form>
All set? Good. Lets get started.
|
