How to Link to a Selected Drop-Down Item to Open a Web Page

By Finn McCuhil

The HTML <form> tag offers several methods of retrieving information from the visitors to your company's website. HTML forms can be used to provide information or additional resources. Providing links to other sites, or even pages on your own site, in a drop-down menu isn't obvious, but it can be done -- with a bit of help from JavaScript.

Open the HTML file for your Web page in a code editor or Notepad.

Create a form to display the drop-down link menu like this:

<form name=”link_list”> <select name=”drop_menu_name”>

The first line creates a form named link_list. This is the name value used by JavaScript to identify the form. The second line is used by JavaScript to determine which link is selected.

Create the link options you want to present to your visitors with the following code:

<option selected>Choose a Link</option> <option value=””>First Choice</option> <option value=””>Second Choice</option> <option value=””>Third Choice</option> </select>

The first line in this section displays “Choose a Link” to let the user know what the drop-down list does. The second, third and fourth lines define a value, in the form of a Web address. The text between the opening and closing <option> tags is the information that is displayed in the drop-down menu. The fifth line closes the <select> tag.

Create an input button to pass the selected value to JavaScript and open the link in a new browser tab like this:

<input type=”button” name=”Submit” value=”Go to link” onClick=”, 'newtab'+drop_menu.value)”>

Inside this <input> tag, the type is defined as a clickable button named Submit. The value is the text shown on the submit button. In this instance “Go to link” is displayed. The “onClick” JavaScript command specifies what the script should do with the information. In this case, the value displayed in the form's drop-down selection box is passed to the “” function which opens a new browser tab pointing to the address specified by <option value=” >.