Dependent CFSELECTS using CF7’s Flashforms

While playing with the Flashforms in CF 7 yesterday I nearly went mad as it didn’t work easily to have two CFSELECT controls, both published by a particular db query, in which the first allows to select the parent category and the second one displaying a particular set of entries related to the selection of the first select control.

The problem is that CFSELECT doesn’t allow binding in the way other Flashforms controls do. With the help and support of Reto Aeberli who provided me with a basic code snippet I was able to get it running finally:

<cfquery name="a" datasource="flashformstest">
        SELECT *
        FROM test
</cfquery>

<cfquery name="b" datasource="flashformstest">
        SELECT * 
        FROM test2
</cfquery>

<cfsavecontent variable="astest">
var i; 
var b_id = myform.id.split(',');
var b_label = myform.label.split(',');
var b_parentid = myform.parentid.split(',');

myselect2.removeAll();
myselect2.enabled = true;

for (i=0; i<b_id.length;i++) 
{
        if (b_parentid[i]==myselect1.value) 
        {
                myselect2.addItem(b_label[i],b_id[i]);
        }
}
</cfsavecontent>

<cfform name="myform" format="flash" width="400">
        <cfselect queryposition="below" label="Parent category"
                  name="myselect1" query="a" value="ID" 
                  display="WERT" width="200" 
                  onChange="#astest#">
                <option>Please select a parent category</option>
        </cfselect>
        <cfselect disabled="true" label="Sub category" 
                  name="myselect2" width="200">
        </cfselect>    
        <cfinput type="hidden" value="#valuelist(b.ID)#" 
                 name="id" width="1">
        <cfinput type="hidden" value="#valuelist(b.AID)#" 
                 name="parentid" width="1">
        <cfinput type="hidden" value="#valuelist(b.WERT)#" 
                 name="label" width="1">    
</cfform>