zama
07-03-2003, 03:58 PM
Hi
I am trying to create 3 listboxes that are dependant on the selection of a radio button.
Everything seems to be working fine. Except for the 'Herptile' listbox is only display one of its values. (But when I view page source code, all the values are listed)
can anybody tell me why?
Also, i thought you could only select one radio box at a time. i seem to be able to select all 3 radio buttons at once. i don't really want it to do this
thanks
my code:
<cfquery name="Bird" datasource="Invasive">
select Name, ID, Type
from lu_Species
where Type='Bird'
order by name
</cfquery>
<cfquery name="Herptile" datasource="Invasive">
select Name, ID, Type
from lu_Species
where Type='Herptile'
order by name
</cfquery>
<cfquery name="Mammal" datasource="Invasive">
select Name, ID, Type
from lu_Species
where Type='Mammal'
order by name
</cfquery>
<script>
var HerptileList= Array <CFOUTPUT>(#quotedValueList(Herptile.Name)#);
var BirdList= Array(#quotedValueList(Bird.Name)#);
var MammalList= Array (#quotedValueList(Mammal.Name)#);
</CFOUTPUT>
function changeSelect(theValue) {
if(theValue=="Herptile") {
var myArray=HerptileList;
} if (theValue=="Bird"){
var myArray=BirdList;
}
else {
var myArray=MammalList;
}
document.getElementById("theListBox").options.length=0;
for(i=0;i<myArray.length;i++) {
var text=myArray[i];
var val=myArray[i];
document.getElementById("theListBox").options[document.getElementById("theListBox").options.length]= new Option(text, val, false, false);
}
}
</script>
<table>
<tr>
<td colspan=2 align=center><select name="theListBox" id="theListBox" style="width:150px"><option>Select Animal Type</select></td>
</tr>
<tr>
<td><input type="radio" value="Herptile" onclick="changeSelect(this.value)" name="Herptile"> Herptile</td>
<td><input type="radio" value="Bird" onclick="changeSelect(this.value)" name="Bird">Bird</td>
<td><input type="radio" value="Mammal" onclick="changeSelect(this.value)" name="Mammal">Mammal</td>
</tr>
</table>
I am trying to create 3 listboxes that are dependant on the selection of a radio button.
Everything seems to be working fine. Except for the 'Herptile' listbox is only display one of its values. (But when I view page source code, all the values are listed)
can anybody tell me why?
Also, i thought you could only select one radio box at a time. i seem to be able to select all 3 radio buttons at once. i don't really want it to do this
thanks
my code:
<cfquery name="Bird" datasource="Invasive">
select Name, ID, Type
from lu_Species
where Type='Bird'
order by name
</cfquery>
<cfquery name="Herptile" datasource="Invasive">
select Name, ID, Type
from lu_Species
where Type='Herptile'
order by name
</cfquery>
<cfquery name="Mammal" datasource="Invasive">
select Name, ID, Type
from lu_Species
where Type='Mammal'
order by name
</cfquery>
<script>
var HerptileList= Array <CFOUTPUT>(#quotedValueList(Herptile.Name)#);
var BirdList= Array(#quotedValueList(Bird.Name)#);
var MammalList= Array (#quotedValueList(Mammal.Name)#);
</CFOUTPUT>
function changeSelect(theValue) {
if(theValue=="Herptile") {
var myArray=HerptileList;
} if (theValue=="Bird"){
var myArray=BirdList;
}
else {
var myArray=MammalList;
}
document.getElementById("theListBox").options.length=0;
for(i=0;i<myArray.length;i++) {
var text=myArray[i];
var val=myArray[i];
document.getElementById("theListBox").options[document.getElementById("theListBox").options.length]= new Option(text, val, false, false);
}
}
</script>
<table>
<tr>
<td colspan=2 align=center><select name="theListBox" id="theListBox" style="width:150px"><option>Select Animal Type</select></td>
</tr>
<tr>
<td><input type="radio" value="Herptile" onclick="changeSelect(this.value)" name="Herptile"> Herptile</td>
<td><input type="radio" value="Bird" onclick="changeSelect(this.value)" name="Bird">Bird</td>
<td><input type="radio" value="Mammal" onclick="changeSelect(this.value)" name="Mammal">Mammal</td>
</tr>
</table>