sanm 0 Newbie Poster

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&nbsp;</option> 
                        <option value="Area" selected>Area Summary&nbsp;</option> 
                        <option value="Office">Office&nbsp;&nbsp;&nbsp;&nbsp;</option> 
                        <option value="District">District&nbsp;</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&nbsp;</option> 
                        <option value="Area" selected>Area Summary&nbsp;</option> 
                        <option value="Office">Office&nbsp;&nbsp;&nbsp;&nbsp;</option> 
                        <option value="District">District&nbsp;</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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.