Go On Select Drop Down Menu

/ HTML, Javascript / by Paul Robinson / 9 Comments
This post was published back on August 23, 2010 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

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

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.

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.

9 Comments

Author’s gravatar

Thanks for your tutorial, but what if you want to open the link in a new window/tab? most browsers in block window.open.

Reply
Author’s gravatar author

As far as I’m aware there isn’t a way around it since it would defeat the purpose of the pop up blocker in your browser.

I’ve only ever used these types of redirect on select for redirecting the current window, not to open another window.

Author’s gravatar

This might be a noob question here. But where do I copy/paste the Javascript code in Word Press?

Would I assume to paste it on the WordPress Theme’s page template?

Thanks

Reply
Author’s gravatar author

Hi Don,

You could indeed just place it in your theme’s page template. You could also create a js file & place it in there, then use:

in your theme’s header file, before the line that says:

That is the ‘accepted’ way to attach script files to your theme.

Author’s gravatar

I did a drop down menu just like this, but I want to add a new option for the user to input on the spot. Do you have any idea how to do it?

Thanks

Reply
Author’s gravatar

Thanks for the tutorial, really useful. I am trying to use this as my navigation for mobile devices, How would I change the function so that when I select a menu item , it shows the name of the current page item rather than “–choose a product–” ?

Reply
Author’s gravatar author

Hi Aaron,

You would need to integrate some system that would recognize the page you are on and use that to select the correct item. Unfortunately I can’t really provide an example as there are a lot of ways to do it & which you use would depend on your environment.

Older Comments
Newer Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more