View Full Version : Creating Links with select boxes
boutells
08-04-2002, 05:50 PM
Can someone advise me as to the corect procedure to code select boxes to link to various pages on the same site. Is this done with HTML or do you have to augment with Javascript?
boxer_1
08-04-2002, 06:08 PM
Here's one way to do it:
<html>
<head>
<title>Example...</title>
<script language="JavaScript" type="text/javascript">
var destination = ["","blah1.html","blah2.html","blah3.html","blah4.html"];
function region(pick){
if (pick != 0)
location.href = destination[pick];
}
</script>
</head>
<body>
<form>
<select onChange="region(this.selectedIndex);">
<option>Make a Selection</option>
<option>Go to blah1</option>
<option>Go to blah2</option>
<option>Go to blah3</option>
<option>Go to blah4</option>
</select>
</form>
</body>
</html>
Of course you'll have to modify the script to suit your purpose. You'll need to change the bolded areas to point to the URL you want and to show the selection name you want. Is this what you were looking for?
boywonder
08-05-2002, 02:58 AM
here's a few more ways using the values of the dropdown options...
using a "go" button:
<form name="pastadv">
<select name="pa">
<option value="past/adv02_0802.htm">8/2/02</option>
<option value="past/adv02_0726.htm">7/26/02</option>
<option value="past/adv02_0719.htm">7/19/02</option>
<option value="past/adv02_0712.htm">7/12/02</option>
<option value="past/adv02_0705.htm">7/5/02</option>
<option value="past/adv02_0628.htm">6/28/02</option>
</select>
<input type="button" value="GO" onClick="window.location.href=this.form.pa[this.form.pa.selectedIndex].value;">
</form>
Using onchange:
<form name="pastadv">
<select name="pa" onchange="window.location.href=this.options[this.selectedIndex].value;">
<option value="past/adv02_0802.htm">8/2/02</option>
<option value="past/adv02_0726.htm">7/26/02</option>
<option value="past/adv02_0719.htm">7/19/02</option>
<option value="past/adv02_0712.htm">7/12/02</option>
<option value="past/adv02_0705.htm">7/5/02</option>
<option value="past/adv02_0628.htm">6/28/02</option>
</select>
</form>
hope that helps.
Zvona
08-05-2002, 09:36 AM
I want to make a note that your linking & redirecting is dependable of Javascript. You should think a way that ensures even clients without JS can navigate normally. Like including normal anchors inside noscript element.
boutells
08-05-2002, 04:16 PM
Thanks to all for the help.
Is there a 'target' function with the <OPTION> tags? I've got the links working with the select boxes, but I want the links to open in a new window. How do I do that?
_Aerospace_Eng_
11-07-2005, 06:22 AM
Change this
location.href = destination[pick];
to this
window.open(destination[pick])
It would need to use a submit button to open it or it might get blocked by popup blockers.
Change this
location.href = destination[pick];
to this
window.open(destination[pick])
It would need to use a submit button to open it or it might get blocked by popup blockers.
Actually, I wanted the link in the select box to open the page in an IFRAME. My code looks something like:
<form name="pastadv">
<select name="pa" onchange="window.location.href=this.options[this.selectedIndex].value;">
<option value="past/adv02_0802.htm">8/2/02</option>
<option value="past/adv02_0726.htm">7/26/02</option>
<option value="past/adv02_0719.htm">7/19/02</option>
<option value="past/adv02_0712.htm">7/12/02</option>
<option value="past/adv02_0705.htm">7/5/02</option>
<option value="past/adv02_0628.htm">6/28/02</option>
</select>
</form>
_Aerospace_Eng_
11-07-2005, 06:49 AM
What is the name of your iframe? Okay instead of what I told you change it to
parent.youriframename.location=destination[pick]
You know its better to say what you actually want the first time. It saves us a few posts.
Yes sorry about that. I had changed my mind after I made the post and before I could edit it, you had replied.
<FORM>
<SELECT class="directory" onchange="parent.iframe.location=destination[pick]">
<OPTION value="">-- Select Box -- </OPTION>
<OPTION value="page1.html">Page1 </OPTION>
<OPTION value="page2.html">Page2 </OPTION>
<OPTION value="page3.html">Page3 </OPTION>
</SELECT>
</FORM>
My IFRAME is called "iframe". When I tried the code above I got an error, or maybe I'm just using your advice incorrectly :(. Where do I put the parent.iframe.location=destination[pick] then?
Deltran
11-08-2005, 03:21 PM
<FORM>
<SELECT class="directory" onchange="parent.iframe.location=destination[pick]">
<OPTION value="">-- Select Box -- </OPTION>
<OPTION value="page1.html">Page1 </OPTION>
<OPTION value="page2.html">Page2 </OPTION>
<OPTION value="page3.html">Page3 </OPTION>
</SELECT>
</FORM>
My IFRAME is called "iframe". When I tried the code above I got an error, or maybe I'm just using your advice incorrectly :(. Where do I put the parent.iframe.location=destination[pick] then?
I think you need this:
<FORM>
<SELECT class="directory" onchange="parent.iframe.location=destination[this.options[this.selectedIndex].value]">
<OPTION value="">-- Select Box -- </OPTION>
<OPTION value="page1.html">Page1 </OPTION>
<OPTION value="page2.html">Page2 </OPTION>
<OPTION value="page3.html">Page3 </OPTION>
</SELECT>
</FORM>
I think you need this:
<FORM>
<SELECT class="directory" onchange="parent.iframe.location=destination[this.options[this.selectedIndex].value]">
<OPTION value="">-- Select Box -- </OPTION>
<OPTION value="page1.html">Page1 </OPTION>
<OPTION value="page2.html">Page2 </OPTION>
<OPTION value="page3.html">Page3 </OPTION>
</SELECT>
</FORM>
I got an error saying "destination is undefined" when I tried that. :(
*bump*
Can someone please help me here? I am rather desperate for an answer and I've searched all over the Internet but couldn't find an answer.
_Aerospace_Eng_
11-14-2005, 05:57 AM
<FORM>
<SELECT class="directory" onchange="parent.iframe.location=this.options[this.selectedIndex].value">
<OPTION value="">-- Select Box -- </OPTION>
<OPTION value="page1.html">Page1 </OPTION>
<OPTION value="page2.html">Page2 </OPTION>
<OPTION value="page3.html">Page3 </OPTION>
</SELECT>
</FORM>
destination is undefined because you probably don't have the script used from the first post of this thread in your html. In the future its best to start your own thread. The likely reason for no one answering your question is because people figure most of the time that if the last post isn't the original thread starter then help has already been given.
Sorry about the late reply. I got locked out of my FTP server. The code finally worked!!! Thanks!!!!!!!! :)
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.