Hi
I am trying multiple related selects using coldfusion and javascript. I have four dropdown list first one is related to the second one and thrid one is related to the first one. It is working as per expected if i have two drop down lists which are related to each other , but if I add third and fourth one and then I select the first one the fourth dropdown is getting selected and if I try the thrid one nothing is happening the second dropdown is not displaying the data which should be populated automatically if i select the first one and if I select the third one fourth should be display data automatically
Please help me get the other selects working. Thank you in advance
Here is the code
<cfquery name="Offices" datasource="Ps">
Select OName, Ocode
From Office
Where Area = '01'
Order by OName
</cfquery>
<cfquery name="Districts" datasource="ds">
Select OName, OCode
From office
Where Area = '01' and OType = 'F1'
Order by OName
</cfquery>
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
if (typeof(Option)+"" != "undefined") v=true;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
if(v){a=new Array();aln=0;}
function getFormNum (formName) {
formNum =-1;
for (i=0;i<document.forms.length;i++){
tempForm = document.forms[i];
if (formName == tempForm) {
formNum = i;
correctForm = tempForm;
break;
}
}
return formNum;
}
function jmp(formName,elementNum) {
getFormNum(formName);
if (formNum>=0) {
with (document.f2.myChoice) {
i=selectedIndex;
if (i>=0) location=options[i].value;
}
}
}
function O(txt,url) {
a[k]=new Option(txt,url);k++;
}
function relate(formName,elementNum,j) {
if(v) {
k=1;
if(j==0) { // 1st category items
a=new Array();
O("-------------------","---");
}
if(j==1) { // 1st category items
a=new Array();
O("-------------------","---");
}
if(j==2) { // 1st category items
a=new Array();
<cfoutput query="Offices">
O("#Oname#","#Ocode#");
</cfoutput>
}
if(j==3) { // 2nd category items
a=new Array();
<cfoutput query="Districts">
O("#Oname#","#Ocode#");
</cfoutput>
}
aln2=a.length;
getFormNum(f2);
if (formNum>=0) {
formNum = formNum + 1;
with (document.f2.myChoice) {
for (var i=options.length-1;i>0;i--) options[i]=null;
for (var i=1;i<aln2;i++) options[i-1]=a[i];
options[0].selected=true;
}
}
}
else {
jmp(f2,elementNum);
}
document.f2.myChoice.focus();
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
if (typeof(Option)+"" != "undefined") v=true;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: webreference.com -->
<!-- Web Site: http://webreference.com -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
if(v){a=new Array();aln=0;}
function getFormNum (formName) {
formNum =-1;
for (i=0;i<document.forms.length;i++){
tempForm = document.forms[i];
if (formName == tempForm) {
formNum = i;
correctForm = tempForm;
break;
}
}
return formNum;
}
function jmp(formName,elementNum) {
getFormNum(formName);
if (formNum>=0) {
with (document.f2.mySelect) {
i=selectedIndex1;
if (i>=0) location=options[i].value;
}
}
}
function O(txt,url) {
a[k]=new Option(txt,url);k++;
}
function relate(formName,elementNum,j) {
if(v) {
k=1;
if(j==0) { // 1st category items
a=new Array();
O("-------------------","---");
}
if(j==1) { // 1st category items
a=new Array();
O("-------------------","---");
}
if(j==2) { // 1st category items
a=new Array();
<cfoutput query="Offices">
O("#Oname#","#Ocode#");
</cfoutput>
}
if(j==3) { // 2nd category items
a=new Array();
<cfoutput query="Districts">
O("#Oname#","#Ocode#");
</cfoutput>
}
aln2=a.length;
getFormNum(f2);
if (formNum>=0) {
formNum = formNum + 1;
with (document.f2.mySelect) {
for (var i=options.length-1;i>0;i--) options[i]=null;
for (var i=1;i<aln2;i++) options[i-1]=a[i];
options[0].selected=true;
}
}
}
else {
jmp(f2,elementNum);
}
document.f2.mySelect.focus();
}
// End -->
</SCRIPT>
<cfform name=f2 action="display.cfm">
<cfif '0' is not "Reg">
<p><label for=ReportLevel class="style3"><span class="style6">Report Level:</span></label>
<select name=ReportLevel id=ReportLevel onChange="relate(this.form,2,this.selectedIndex);">
<option value="Reg" selected>Reg Summary </option>
<option value="Area" selected>Area Summary </option>
<option value="Office">Office </option>
<option value="District">District </option>
</select>
</p>
<p><label for=myChoice><span class="style6">Select Office: (if applicable)</span></label>
<select name=myChoice
ID=myChoice
>
<option value="---">-------------------</option>
</select>
</p>
<p><label for=ReportLevelz class="style3"><span class="style6">Assigned Component:</span></label>
<select name=ReportLevelz id=ReportLevelz onChange="relate(this.form,2,this.selectedIndex1);">
<option value="Reg" selected>Reg Summary </option>
<option value="Area" selected>Area Summary </option>
<option value="Office">Office </option>
<option value="District">District </option>
</select>
</p>
<p><label for=mySelect><span class="style6">Assinged Office </span></label>
<select name=mySelect
ID=mySelect
>
<option value="---">-------------------</option>
</select>
</p>
<cfelse>
<input type="hidden" name="Home Office " value="Reg">
<input type="hidden" name="myChoice" value="---">
<input type="hidden" name="mySelect" value="---">
</cfif>
</cfform>