Articles

Navigation ( archives ›› 2006 ›› June ›› 13 ›› How to create a dropdown box that navigates )

How to create a dropdown box that navigates

Posted on June 13, 2006, 11:55 am EST

Here is a simple function that jumps to the location of hte jumpbox. Many people have asked me how to do this.. So here it is!

CODE:
<html>
<head>
<!-- 
Here we will place the Javscript page to jump to...
-->
<script type="text/javascript">
/*
* On click, it redirects to the page
*
* @author Mohamed Mansour <www.m0interactive.com>
*
*/
function jumpToPage( redirect , selectedField , restore ){ 

	eval(redirect+".location='"+selectedField.options[selectedField.selectedIndex].value+"'");

	if (restore) 
		selObj.selectedIndex=0;
}
</script>
</head>
<body>
<!-- 
Here we will place the HTML code
-->
<form method="get" action="">
<select name="Id" id="Id" onchange="jumpToPage('parent',this,0)">
<option value ="">SELECT A DESTINATION</option>
<option value ="http://www.yahoo.com">Yahoo</option>
<option value ="http://www.google.com">Google</option>
</select>
</form>
</body>
</html>

Note, that you can change the destination of the jumpbox to reflect what your interst is like. For example here is how I did mine in an JSP application:

CODE:
<form method="get" action="">
	<select name="Id" id="Id" onchange="jumpToPage('parent',this,0)">
		<%for (Iterator i = account_list.iterator(); i.hasNext();) {
			AccountSummaryDetails account_key = (AccountSummaryDetails) i.next(); %>
		<option value="<%=account_key.getAccountID()%>" <%=Integer.parseInt(request.getParameter("Id")) == account_key.getAccountID() ? "selected" : ""%>><%=account_key.getAccountType() == 1 ? "Powersaving" : "Powerchecking"%> - <%=accountFormatter.format(account_key.getAccountID())%>	</option>
	<% } %>
	</select>
</form>

As you can see the getAccountId returns the ID and within my jump box I have the following...

CODE:
eval(redirect+".location='/Bank/MainController.html?Module=ACCOUNT&Id="+selectedField.options[selectedField.selectedIndex].value+"'");

Notice how I made it goto my servlet. I just added the number to that link since that what my object is like.

So this is how you make a simple jumpbox:) Enjoy!

About this Article:

Comments (0) - Add yours, or View the replies

Categoy (Javascript)

Views (989)

Digg it: Digg this article