It’s actually fairly simple to create such a drop down menu. First you need some basic HTML, so let’s get down to it.

HTML

<form name="departments" action="" method="post">
    <select name="products" onChange="goThere()">
        <option selected="selected" value="choose">--Choose a Product--</option>
        <option value="original-artwork-and-aceos">Original Art</option>
        <option value="prints-and-posters">Prints & Posters</option>
        <option value="greeting-cards">Greeting Cards</option>
        <option value="invitations-and-announcements">Invitations</option>
    </select>
</form>

So that is the HTML. We have a very basic select inside a form. The important things are this: You must give the form & select a name so you can target them with javascript, you must also leave the onChange event. Should you already have a select & form set up just add the onChange event into your select.

Another important thing to note is that the values of each option should somehow get you to the page you want to go to. How that happens is entirely up to you, but for this example I am going to use a WordPress related system. If you are using this for a WordPress project too feel free to follow along.

Okay. That’s the HTML sorted. Let’s take a look at how the Javascript stacks up.

Javascript

This Javascript is actually quite simple, once you know how.

function goThere() {
    var list = document.forms['departments'].products
        if(list.selectedIndex != 0) {
            document.location.href = "/"+list.options[list.selectedIndex].value+"/"
	}
}

Okay, here we go. We create the function named to match our onChange event from earlier. For ease of use (and because I’m lazy) we set a variable list to equal the DOM path to our select (named ‘products’). Remember to change departments and products to the same as the name attribute of your form and select elements respectively.

Now we use an if to check if the currently selected item in the drop down does not have an index of 0. The item with an index of 0 is the first item & since that is the ‘–Choose a Product–’ item we don’t want anything to happen should that be selected. If you move that item you will need to change the number to refer to the correct items index.

Just to be clear, the Index is the item’s position in the list minus one. So if it’s the 3rd down it will be 2 as the computer counts from 0.

If the selected item’s index is not 0 we want to redirect the user to the correct page.

This is where it all depends on your situation. If you are using WordPress, as I mentioned before, the way I’ve set the drop down list up might be helpful. document.location.href allows us to change the current URL & redirect the user to a page of our choice. In this case we take the value of the currently selected item and place it between forward slashes. Because we are using WordPress this takes us to the pages with the same name & our option values are the page’s slugs. This will only work with pages, or if you have a redirection plugin you may be able to rig up a redirection for each of the URLs.

Again I cannot tell you how to set up the correct URLs for every situation only how to actually execute the redirection. I used WordPress in this example as that is the application used by the client who asked for this code to be implemented.

Degradation

One of the major problems with these types of ‘redirect on select’ scripts is that they will not work if the user has Javascript disabled. To solve this you can add in some noscript tags & place a button in that executes the forms action attribute. Since this is a single static value it would be best to have it go to some sort of page that replicates the functionality of the drop down menu, but on a single page.

Example

I know you all like examples so here is a little one. This one just redirects back here no matter which item you select. The idea with this example is just to show you that it actually redirects on select.


Hopefully this little tutorial helped you out. I am going to start a small range of starter tutorials, tutorials for those just learning JS, HTML and the likes as I’ve noticed that most of the tutorials here at Return True are for intermediate to advanced users.

Let me know if you have any questions, queries or problems & I’ll try to help you out as soon as I can.