How to Create a Drop-Down Menu That Redirects to a New Page

How adding JavaScript does the trick

Question Mark Key
Question Mark Key. Image courtesy hdoddema from StockXchng #619007.

Novice website designers often want to know how to create a drop-down menu so that when navigators choose one of the options they will automatically be redirected to that page. This task isn't as tricky as it might seem. In order to set up a drop-down menu to redirect to a new Web page when selected, you need to add some simple JavaScript to your form.

Getting Started

First you need to set up your <option> tags to include the URL as the value so that your form knows where to send the customer.

See the following example:

<option value="/">Web Design Front Page</option>
<option value="/library/beginning/bl_begin.htm">Beginning HTML</option>

Once you've set up those tags, you will need to add an "onchange" attribute to your <select> tag to tell the browser what to do when the option list changes. Simply put the JavaScript all on one line, which the example below shows:

<select name="URL" onchange="window.location.href= this.form.URL.options[this.form.URL.selectedIndex].value">

Helpful Tips

Now that your tags are set up, remember to make sure that your select tag is named "URL." If it isn't, change the JavaScript above where ever it says "URL" to read your select tag's name. If you want a more detailed example, you can see this form in action online. If you still need more guidance, you can also review a brief tutorial that discusses this script and some other steps you can take with JavaScript.