<cfquery name="getLocal" datasource="#CDCs#"> SELECT AFSC.AFSC_ID,AFSC.AFSC,CDCSets.SetsID,CDCSets.Sets,Volumes.VolID,Volumes.Volumes
FROM AFSC INNER JOIN CDCSets
ON AFSC.AFSC_ID = CDCSets.AFSC_ID INNER JOIN Volumes
ON CDCSets.SetsID = Volumes.SetsID
ORDER BY AFSC, Sets, Volumes
</cfquery><html> <head> <title>Dynamic JS Dropdowns
</title> <cfset idx = -1> <cfset idx1 = -1> <cfset mycase = 0> <!---
The JavaScript is adapted from Mike Corbridge's Multiple dynamic drop-down selection boxes example http://tutorial11.easycfm.com/
---> <script language="JavaScript1.2"> function whichLocal(obj){
switch (obj.selectBorder.selectedIndex){
<!--- use the group attribute to group output by category ---> <cfoutput query="getLocal" group="AFSC"> <cfset mycase = mycase + 1>case #mycase#:
<cfset myList = ValueList(getLocal.AFSC_ID)> <cfset numberInCountry = ListValueCount(myList, AFSC_ID)> obj.selectLocal.length=#numberInCountry#
<cfoutput><cfset idx = idx + 1> obj.selectLocal.options[#idx#].value="#getLocal.SetsID#"
obj.selectLocal.options[#idx#].text="#getLocal.Sets#"
</cfoutput> <cfset myList1 = ValueList(getLocal.SetsID)> <cfset numberInCountry1 = ListValueCount(myList, SetsID)> obj.selectLocal1.length=#numberInCountry1#
<cfoutput><cfset idx1 = idx1 + 1> obj.selectLocal1.options[#idx1#].value="#getLocal.VolID#"
obj.selectLocal1.options[#idx1#].text="#getLocal.Volumes#"
</cfoutput> break;
<cfset idx = -1> </cfoutput> }
}
</script> </head><body><form name="myform" action="myactionpage.cfm" method="post"> <table> <tr> <td>OPTIONS
<br> <select name="selectBorder" onchange="whichLocal(this.form)"> <option>- Select AFSC-
</option> <!--- again, use the group attribute to group output by category ---> <cfoutput query="getLocal" group="AFSC"> <option value="#AFSC_ID#">#AFSC#
</option> </cfoutput> </select> <select name="selectLocal" onchange="whichLocal(this.form)"> <option> </option> <option></option> <option></option> <option></option> <option></option> <option></option> <option> ---------------------------------
</option> </select> <select name="selectLocal1" onchange="whichLocal(this.form)"> <option> </option> <option></option> <option></option> <option></option> <option></option> <option></option> <option> ---------------------------------
</option> </select> <input type="submit" name="Submit" value="Submit"> </td> </tr></table></form></body></html>