JavaScript Dropdown Menu

This page contains copy/paste code for creating a JavaScript dropdown menu (or "Jump Menu"). This menu uses HTML form elements and JavaScript to provide a quick, responsive jump menu.

Dropdown menus like this are sometimes referred to as a "Jump menu" because it "jumps" to the selected URL as soon as you make the selection. (Other drop down menus require you to click on a "go" button after you've made your selection - which is the safe way to go if you're worried about users who don't have JavaScript enabled).

Explanation of Code

The above code can be separated into two parts: the JavaScript code, and the HTML code. Here they are separated:

The JavaScript

This JavaScript code consists of a function we've called jumpto. This function uses document.location.href to load the URL provided by the jump menu (which is stored in the x parameter). This accepts a parameter called x, which is the value we pass in when we call the function in our HTML. In the following code I've changed the form name to form2 to avoid any conflict with the above example (which uses form1). You can call your form anything you like.

The HTML

The HTML part is what displays the actual dropdown menu, which in this case is an HTML <select> element. You can change the values here to your own URLs. Of course, you're more than welcome to leave them as they are!

And there you have it - your own JavaScript dropdown menu!