Go On Select Drop Down Menu
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
|
1 2 3 4 5 6 7 8 9 |
<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.
|
1 2 3 4 5 6 |
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.
9 Comments
paulo
Thanks for your tutorial, but what if you want to open the link in a new window/tab? most browsers in block window.open.
Paul Robinson
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.
Darren
Thanks Paul –
Been looking for this code for ages. 😉
Paul Robinson
No problem. 🙂
Don
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
Paul Robinson
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.
Shan
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
Aaron
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–” ?
Paul Robinson
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.