SSR495 Posted November 21, 2009 Share Posted November 21, 2009 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 More sharing options...
chibineku Posted November 21, 2009 Share Posted November 21, 2009 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. Link to comment Share on other sites More sharing options...
SSR495 Posted November 21, 2009 Author Share Posted November 21, 2009 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 More sharing options...
SSR495 Posted December 15, 2009 Author Share Posted December 15, 2009 This code isn't working Windows IE. It works great with Google Chrome. Anyone have an idea what could be wrong or missing? Thanks. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.