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.
