...

View Full Version : redirect on select



ShMiL
09-22-2002, 06:18 PM
I have a <select> tag and I want each <option> to redirect to another page once it selected.

The process is dynamic - for example:
<option value="3">sssdfasgt</option> will redirect to http://www.URL.com/page.asp?value=3 upon selection.

What I don't want to hapen is to redirect a selected option (<option selected>) - only the not selected will redirect.
How can it be done?
Thanks alot.

ConfusedOfLife
09-22-2002, 07:54 PM
Try this :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script>
function reDir(oInput)
{
switch (oInput)
{
case 1 :
window.location = "2.html";
break;
case 2 :
window.location = "3.html";
break;
case 3 :
window.location = "4.html";
break;
}
}
</script>
</head>

<body>

<select name="hello" onchange="reDir(this.selectedIndex)">
<option selected> 1
<option> 2
<option> 3
<option> 4
</select>


</body>
</html>






Notice : Each option has an index, the indexes begin from 0, means the index number of <option> 4 is 3. If you don't wana redirect to a page when a by default selected option is chosen, do not put a case for that in the switch.

boywonder
09-22-2002, 10:46 PM
Another way...
I would probably write something like this:

<script language="javascript">
function linkTo(optVal){
if(optVal=="") return false;
window.location='http://www.URL.com/page.asp?value='+optVal;
}
</script>
<select name="select" onchange="linkTo(this.options[this.selectedIndex].value);">
<option value="" selected>select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

adios
09-23-2002, 05:21 AM
If this is a select-multiple you'll need more...


<html>
<head>
<title>untitled</title>
</head>
<body>
<form>
<select
onchange="if(!options[selectedIndex].defaultSelected)
location='http://www.URL.com/page.asp?value='+options[selectedIndex].value">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4" selected="selected">option 4</option>
<option value="5">option 5</option>
</select>
</form>
</body>
</html>

ShMiL
09-23-2002, 10:21 AM
Thanks to you all!
great help for me...

ShMiL
09-25-2002, 12:06 AM
This onChange thing is a bit problematic.
When the page loads, the selected option in the select tag will not redirect if I reselect it.
For example:
my select has three options:

<select onchange="blabla">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
When I select option2, it'll perform the 'blabla' onchange - same for option3.
But when I select option1 (which is already selected) it does nothing!
I thought about something like 'onselect' for each option - but it didn't work.
Any suggestions?

Thanks.

adios
09-25-2002, 12:59 AM
A change event, which is what the Select.onchange handler 'traps', will only be fired when, heh, you change the drop-down. Re-selecting the same option isn't considered a change. Normally this is avoided by setting the <option selected="selected"...> attribute on a 'dummy' option (usually the first) to force a change. Would this be a problem?

boywonder
09-25-2002, 01:06 AM
Yeah the dummy option solves that real good. Usually I name it "select" or "click to navigate"

Another thing you can do is provide a 'go' button next to the select that calls the same function. People can use that if there was no onchange fired. it's good if there might be times where an option that needs to be available might already be selected. It serves as a backup. It's very common (and intuitive to the user) to use a combination of both onchange and 'go' button if your design allows it.

ShMiL
09-25-2002, 01:14 AM
I'd rather not putting an ugly "go" button...
and the dummy option will ruin it too... (I have to have specific *real* option selected)

Is there any other way to solve this?
Is JS+HTML so poor?!? I can't believe it...
- any other suggestions?
(thanks alot for helping)

adios
09-25-2002, 01:26 AM
Ummm...I thought the whole idea here was to not redirect if the selected option was chosen. :confused:

ShMiL
09-25-2002, 10:13 AM
I had to change it.
Is there any other way? maybe something specific for each <option> - onclick,onselect?
something?!?
Thanks

ConfusedOfLife
09-27-2002, 07:21 PM
I dunno how to make this, but even if you make it, the whole idea is nonesense to me! Coz you have to assign the address of your current page to the first option, that makes that rational, because each option redirects you to a page, so, if you don't use a dummy option, then it means that the first option actually has redirected you to a page, that would be the current page, unless you're trying to show that it's gonna refresh the page. Also a dummy option isn't ugly at all! But it's good if somebody finds the answer, coz theoretically it's possible ( As we can see in this case! )

ShMiL
09-27-2002, 07:54 PM
Your'e wrong my friend!
It's an administration page I made for a client which always redirects to the same page with different parameters attached (e.g: ?parameterA=12&parameterB=8).
It's important that the options will remain in the same order(!) and I need it to redirect for each and every <option>.
I'm sure there's a way - I hope someone know something...

Owl
09-28-2002, 03:11 AM
Hi ShMiL,

I understand this:
Originally posted by ShMiL
I need it to redirect for each and every <option>.
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
click1=0
function redirect(x) {
if (!click1) { click1=1; return }
if ((x.selectedIndex+1) == location.href.split('=').reverse()[0]) { click1=0; return }
form1.submit()
}
</SCRIPT>
</HEAD>

<BODY>
<FORM name="form1">
<select name="value" onclick="redirect(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</FORM>
</BODY>
</HTML>But I do not understand this:
Originally posted by ShMiL
It's important that the options will remain in the same order(!) ( ) ( )
>>V



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum