Solved

Dropdown

Posted on 2001-06-14
8
342 Views
Last Modified: 2010-04-09
I'm drawing a blank here. I can't remember how to redirect
to a site when picks an option within my dropdown...

Thanks ! :-)
0
Comment
Question by:MNY
  • 3
  • 3
  • 2
8 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6191603
setup an array of the urls you want to go to and a function
to set the loction in the head:


<script language="JavaScript">
<!--
   var theUrls new Array("url", "url" "url")
   function redirect(pntr)
   {
      window.location=theUrls[pntr]
   }
//-->
</script>

then use the onChange event of the select to fire the fucntion
the select index will be the pointer into the array, so the
opion values need to be in the same order as the array entries


<select onChange="redirect(this.selectedIndex)">
<option> first url
<option> second url
<option> third url
</select>


HTH

Cd&
0
 

Author Comment

by:MNY
ID: 6191642
What if I have 10 dropdowns in the same page?
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6191686
In that case you could simply do:

<html>
<head>
</head>
<body>
<form>
<p>
<select onChange="window.location = this.options[this.selectedIndex].value;">
<option value="" selected>-- Choose One --</option>
<option value="http://www.yahoo.com/">Yahoo</option>
<option value="http://www.google.com/">Google</option>
</select>
</p>
<p>
<select onChange="window.location = this.options[this.selectedIndex].value">
<option value="" selected>-- Choose One --</option>
<option value="http://www.yahoo.co.uk/">Yahoo UK</option>
<option value="http://www.google.co.uk/">Google UK</option>
</select>
</p>
</form>
</body>
</html>

:o)

Ant
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 15

Accepted Solution

by:
a.marsh earned 100 total points
ID: 6191690
The onChange is identical for each select box and the value of each option is the URL to redirect to.

:o)

Ant
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6191735
then you end up with a bigger array and add an argument to the
function to apply an offset to the starting point in the array
for that select:

<script language="JavaScript">
<!--
   var theUrls new Array("url", "url", "url","url","url","url")
   function redirect(offset,pntr)
   {
      subscript=offset+pntr;
      window.location=theUrls[subscript]
   }
//-->
</script>

the value of the first argument will be the total of all the preceeding
options. That will point to the correct starting point in the array and
the index will get applied from that starting point

<select onChange="redirect(0,this.selectedIndex)">
<option> first url
<option> second url
<option> third url
</select>

<select onChange="redirect(3,this.selectedIndex)">
<option> fourth url
<option> fifth url
<option> sixth url
</select>


Cd&
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6191759
Glad to help - why only a B grade?!?!?

Ant
0
 

Author Comment

by:MNY
ID: 6191783
My mistake. Sorry Ant.
I'll make it up to you...
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6191793
LOL. I don't what I was even thinking.  The way Ant has it the right way.  I've got on my HDD from the last time I answer this.  Don't know where I was going with that.  Sorry...bad morning.

Cd&

0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question