PDA

View Full Version : Making two Value Lists interact



hubbni
04-20-2005, 01:07 AM
What i am trying to do is have a value list of 5 selections. All the slections will do nothing but give thier form value. But Selection #3 in the value list must open another value list below that has the options for Selection 3.

So, if you select selection 3 from the list, you will then have to choose a second choice from the second value list that either appears or becomes active. I really need to get this done soon since I am on a deadline.

I need this to work cross browser, including Safari, not just IE. Hope this will work.

Thanks

hubbni
04-25-2005, 06:43 PM
<form name="doublecombo">
<p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Technology Sites</option>
<option>News Sites</option>
<option>Search Engines</option>
</select>
<select name="stage2" size="1">
<option value="http://javascriptkit.com">JavaScript Kit</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.wired.com">Wired News</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
</p>

<script>
<!--

/*
Double Combo Script Credit
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScripts here!
*/

var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("JavaScript Kit","http://javascriptkit.com")
group[0][1]=new Option("News.com","http://www.news.com")
group[0][2]=new Option("Wired News","http://www.wired.com")

group[1][0]=new Option("CNN","http://www.cnn.com")
group[1][1]=new Option("ABC News","http://www.abcnews.com")

group[2][0]=new Option("Hotbot","http://www.hotbot.com")
group[2][1]=new Option("Infoseek","http://www.infoseek.com")
group[2][2]=new Option("Excite","http://www.excite.com")
group[2][3]=new Option("Lycos","http://www.lycos.com")

var temp=document.doublecombo.stage2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>

</form>

That is the code that I have so far. And it works great in a form by its self. But when I try to add the code to my form that I have created, it does not work, why?

vwphillips
04-25-2005, 08:01 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function Select(i){
document.getElementById('stage2').style.visibility='hidden';
if (i==2){
document.getElementById('stage2').style.visibility='visible';
}

}

//-->
</script>

</head>

<body>
<form name="doublecombo">
<p><select id="example" name="example" size="1" onChange="Select(this.selectedIndex)">
<option>Technology Sites</option>
<option>News Sites</option>
<option>Search Engines</option>
</select>
<select id="stage2" name="stage2" size="1" style="visibility:hidden;" >
<option value="http://javascriptkit.com">JavaScript Kit</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.wired.com">Wired News</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
</p>

</body>

</html>

hubbni
04-27-2005, 06:43 PM
I am still confused on how to use this code, but ADD other form elements to it. my form posts to a database, so when i add this code, it just stops working. Why is that? Can someone expalin it in an easy to understand way?