Drop down menu code

spyyder · #1 Jan 28, 2006, 08: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, 03:35 AM

Here's a solution- quick & easy.

Code:

<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:

http://www.askmehelpdesk.com/computers-technology/
http://www.askmehelpdesk.com/forum-community/
http://www.askmehelpdesk.com/a/

You could set prefix to "http://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:

Code:

<html>
<head>
<title>Drop Down Test</title>
<script language="javascript">
    function redirectMe() {
        var prefix = "http://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



At Ask Me Help Desk you can ask questions in any topic and have them answered for free by our experts. To ask questions or participate in answering them you must register for a free account. By registering you will be able to: Get free answers from experts in any of our 300+ topics. Accept money for answers that you provide. Communicate privately with other members (PM). See fewer ads. Sign Up!