His Mightiness HTML Tricks and Tips

Combo Boxes are great ways to allow your site visitors to easily navigate through your web pages. Most people find these very convenient and speedy tools to use at large sites especially. The only downfall I see with it is that it does not allow for descriptions. There are other scripts available for this purpose that are more complicated and for more advanced web page authors.


        
          <script
        LANGUAGE="JavaScript">
<!--
function gotoURL(){
var
          current = document.formName5.selectName5.selectedIndex;
location.href
          = 
document.formName5.selectName5.options[Current].value;
return
          false;
}
//-->
</script>

<table>
<tr
          align="left" valign="top">
<td><form
          name="formName5">
<p><select
          name="selectName5" size="1">
<option>Select
          Your Destination</option>
<option value="your
          URL goes here">Title Goes Here</option>
<option
          value="your URL goes here">Title Goes
          Here</option>
</select><input name="submitName5"
          type="submit" value="Go!"
onClick="return
          gotoURL()"><br>
</p>
</form>
</td>
</tr>
</table>

The bolded areas are ones you will need to change in order to personalize this feature for your use. (Be sure your changes coordinate with the purpose of the script.) The title of your page to be in the Combo Box does not have to be the actual title of the page, but something descriptive can work as well. The "Go!" can be replaced with anything. This is only the most common word placed on buttons. Also, I only put two examples of click throughs here. The one with "SELECTED" is the one that will show up as a default. The "Select Your Destination" is not a click through, but only something to show what the box does. You can omit this part of the script if you don't need it. Remember, you are the artist, so be creative and personalize your web page kingdom.

**Notes: You can also add "fillers" to the combo box to separate different sections such as:
------------------
All you have to do is use the <option> tag as seen above without a value. The same can be done for a blank space.

Site Map | Contact Me | Webmaster Support