PDA

View Full Version : Multiple Related Selects with JavaScript



sanm
12-14-2009, 09:52 PM
Hi
I am trying multiple related selects using javascript, and adding the code in coldfusion
I got the page working, but only the first dropdown has any data in it. The other dropdown list is not displaying the data which should be populated automatically

Please help me get the other selects working. Thank you in advance


<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="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.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();
}
// End -->
</SCRIPT>

<cfform name=f2 action="display.cfm">
<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>

<input type="hidden" name="ReportLevel" value="Region">
<input type="hidden" name="myChoice" value="---">

</cfform>

sanm
12-15-2009, 11:50 PM
Any Help?