Jump to content

Goto Url By Selecting A Drop Down List Option


SSR495
 Share

Recommended Posts

Ok, this is an easy one all of you "pro's", but I don't know how to do it and need a little help. Here is what I want to do: create a drop down list with three options. Once the user selects one of the options, it takes him/her to a URL (I would like it to open up in a new window) e.g. a .pdf file on my web site. Here is what I have so far: <td><select name="select" style="width:111px; height:19px;"> <option selected="selected"></option> <option>Company Brochure</option> </select></td>I want the first option to display a blank field and the rest of the list of options below that. I know how to make the list of options, but I do not know how to make the hyperlink part work. Anyone have any ideas? Thanks much! Ace495PS. I assume I need to do this with javascript? If there is an easier way, I am open to that also.

Link to comment
Share on other sites

The easiest way to accomplish this is:Here is your select input with extra value attribute equal to the url associated with the select option:

<select name="select" style="width:111px; height:19px;"><option selected="selected"></option><option value="company_brochure.html">Company Brochure</option></select>

The easy old school way is to bind the javascript event here, like this:

<select name="select" style="width:111px; height:19px;" onchange="loadPage(this.selectedIndex)">

The javascript looks like this:

<script type="text/javascript">function loadPage(selOpt) {window.open(selOpt.value, selOpt)}</script>

And, that's it. So, the whole thing, in super skeletal form (with a check that we don't try to go to an empty page if we change to the first, empty option), is:

<html><head><script type="text/javascript">function loadPage(selOpt) {if(selOpt != '') {options = document.getElementsByTagName('option');for(i=1; i < options.length; i++) {if(i == selOpt) {window.open(options[i].value, options[i]);}}}}</script></head><body><select name="select" style="width:111px; height:19px;" onchange="loadPage(this.selectedIndex)"><option selected="selected"></option><option value="company_brochure.html">Company Brochure</option></select></body></html>

Note that this only works if you only have one select element. It can easily be altered if you have more, but that works for now.

Edited by chibineku
Link to comment
Share on other sites

The easiest way to accomplish this is:Here is your select input with extra value attribute equal to the url associated with the select option:
<select name="select" style="width:111px; height:19px;"><option selected="selected"></option><option value="company_brochure.html">Company Brochure</option></select>

The easy old school way is to bind the javascript event here, like this:

<select name="select" style="width:111px; height:19px;" onchange="loadPage(this.selectedIndex)">

The javascript looks like this:

<script type="text/javascript">function loadPage(selOpt) {window.open(selOpt.value, selOpt)}</script>

And, that's it. So, the whole thing, in super skeletal form (with a check that we don't try to go to an empty page if we change to the first, empty option), is:

<html><head><script type="text/javascript">function loadPage(selOpt) {if(selOpt != '') {options = document.getElementsByTagName('option');for(i=1; i < options.length; i++) {if(i == selOpt) {window.open(options[i].value, options[i]);}}}}</script></head><body><select name="select" style="width:111px; height:19px;" onchange="loadPage(this.selectedIndex)"><option selected="selected"></option><option value="company_brochure.html">Company Brochure</option></select></body></html>

Note that this only works if you only have one select element. It can easily be altered if you have more, but that works for now.

It worked like a champ! Thanks much. I really appreciate it! I would have never been able to figure that one out.
Link to comment
Share on other sites

  • 4 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...