JavaScript Jump Menu
A JavaScript jump menu is a normal drop down menu, HTML select element, that, using a JavaScript function, jumps to a predefined URL once you make the selection. I know everyone knows how to do it, but I just wanted to record it.
You can easily create such menu using a one-line JavaScript function. Here is an example:
<script type="text/javascript">
function jump(select_element, target_frame){
eval(target_frame+".location='"+select_element.options[select_element.selectedIndex].value+"'");
}
</script>
And here is the HTML form:
<form name="form" id="my_form">
<select name="jump_menu" id="jump_menu" onchange="jump(this, 'parent')">
<option value="">Select ...</option>
<option value="item1.html">item1</option>
<option value="item2.html">item2</option>
<option value="item3.html">item3</option>
</select>
</form>
So, when you pick an item from the list, the onChange() event fires and calls the jump() function passing two parameters, the select object itself and the target frame for the action.
Other drop down menus require clicking a button after making the selection. However, you can use the same JavaScript function to do this. Here is the HTML form:
<form name="form" id="my_form">
<select name="go_jump_menu" id="go_jump_menu">
<option value="">Select ...</option>
<option value="item1.html">item1</option>
<option value="item2.html">item2</option>
<option value="item3.html">item3</option>
</select>
<input type="button" name="go_button" id= "go_button" value="Go" onclick="jump(getElementById('go_jump_menu'), 'parent')" />
</form>
Finally, be aware that JavaScript menus are not fully accessible, because they are not accessible for user agents that can't handle JavaScript, and hence should be used as a secondary menu not a primary one.
Did you like this article? Bookmark it:
Related Articles
- JavaScript Jump Menu
- Menus Behind Flash
- A New Google API for JavaScript Libraries
- How to avoid the IE box model bug
- Why 100% width may damage the layout
Khadeejib
July 1st, 2010 - 12:43 PM
How to avoid some options of a jump menu to not jump? I mean, i only need 1 option of it to jump into other form but the other, i need it just to be a selected one. Please help me...