How do I create a drop-down menu that redirects to a new page when selected?

Question: How do I create a drop-down menu that redirects to a new page when selected?

I got the following question from a reader:

I want to make a drop down menu so that when a navigator chooses one of the options they will be redirected automaticlly to that page.

Answer:

In order to set up a drop-down menu to redirect to a new Web page, you need to add some simple JavaScript to your form.

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:

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

Then you need to add an "onchange" attribute to your <select> tag to tell the browser what to do when the option list changes (put the JavaScript all on one line):

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

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.

You can see this form in action online.

I also have an article that discusses this script and some other things you can do with JavaScript.