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.
