Drop down menu code [Archive]

spyyder

Jan 28, 2006, 09:55 AM

I need a code that will create a Drop Down Menu (like a standard drop down scroll menu from frontpage), that allows the user to make a selection then redirect to a page that the person selected.

E.g. drop down menu has the following headings/titles

ITEM1
ITEM2
ITEM3

When item1 is selected, it automatically redirects to page1.html, and for Item2 it redirects to page2.html, and etc, etc.
And the default (initial) selected option is 'ITEM1'.
Thanks.:)

LTheobald

Jan 31, 2006, 04:35 AM

Here's a solution- quick & easy.

<html>
<head>
<title>Drop Down Test</title>
<script language="javascript">
function redirectMe() {
var prefix = "";
window.location = prefix + document.all.redirectSelect.value;
}
</script>
</head>

<body>
<select name="redirectSelect" onChange="redirectMe()">
<option value="test.html" selected>Option 1</option>
<option value="test2.html">Option 2</option>
<option value="test3.html">Option 3</option>
</select>
</body>
</html>

Quite simple really. When the select box is changed, the javascript function redirectMe() is called. This checks for the value of the selected element and redirects you to it.

Note I've also included a blank variable called "prefix". This could be used to make the HTML code shorter. For example, say you want to redirect to the following pages:

https://www.askmehelpdesk.com/forumdisplay.php?f=15
https://www.askmehelpdesk.com/forumdisplay.php?f=365
https://www.askmehelpdesk.com/forumdisplay.php?f=57

You could set prefix to "https://www.askmehelpdesk.com/forumdisplay.php?f=". Then in the HTML you would just need to set the value to the remaining portion of the address (the number). Here's the code to explain what I mean:

<html>
<head>
<title>Drop Down Test</title>
<script language="javascript">
function redirectMe() {
var prefix = "https://www.askmehelpdesk.com/forumdisplay.php?f=";
window.location = prefix + document.all.redirectSelect.value;
}
</script>
</head>

<body>
Ask Me Help Desk Forums:
<select name="redirectSelect" onChange="redirectMe()">
<option value="15" selected>Technology & the Web</option>
<option value="365">Forum Community</option>
<option value="57">Building Web Pages</option>
</select>
</body>
</html>

Hope that helps. Any problems - post a reply here and I'll get on it.

*** EDIT ***
And now I see the asker was banned! Oh well, it might help someone else :)