Drop Down Menu Opening a New Window


Example of Script

Choose your destination and click on the button to have the link open in a new window.

Grab the Code
Explanation of Code
This script uses a onClick event handler in the button <INPUT> tag to call the window.open method and load a new document in the window to the value set by the form named gotolocation using the <SELECT NAME="dropdown"> tag's selectedIndex

A closer examination of the complete statement may help in understanding how this is done.

window.open(document.gotolocation.dropdown.options[document.gotolocation.dropdown.selectedIndex].value', 'newWindow','height=300,width=600');"

The first section, window.open, is the method used to open the window.

document.gotolocation.dropdown.options[document.gotolocation.dropdown.selectedIndex].value;

This next section will need a little breaking down in order to follow it easily. The first part, document, refers to the currently displayed HTML document.

gotolocation is the name that was given to the entire form.

dropdown is the name of the <SELECT NAME="dropdown"> field of the form.

selectedIndex refers to the <OPTION> that was chosen.

and finally, the last segment, value, refers to the value that was set in the <OPTION> tag.

So that great long string of code was used to pick out the URL set in the drop down menu and set the new page to that value.

This will be used by the window.open method as the URL to load in the new window. The newWindow is the name of the new window and some of the charactersitics of the window are that its dimensions, ie., height=300,width=600 are set to these values.

Copyright © 2001 John H. Bolgiano, Jr. - All rights reserved
Modified with permission for educational use by Roberta Bush