Question

There’s a similar question on stackoverflow, but I wanted to ask it again because ColdFusion is different than PHP.
I have two select lists, the second one is populated from the first.

<cfparam name="form.MajorID" default="0">
<cfform name="myForm" preservedata="yes">
<cfselect name="MajorID" query="qryMajor" display="MajorDisplay" value="MajorID" queryPosition="below"
onChange="document.myForm.submit();">
<option value="0">Please Select major topic</option>
</cfselect>
<div>
<cfset qryMinor = objMinor.WhereMajorID(form.MajorID)>
<cfselect name="MinorID" query="qryMinor" display="MinorDisplay" value="MinorID" queryPosition="below" onChange="document.myForm.submit();">
<option value="0">Please Select minor topic</option>
</cfselect>
</div>
</cfform>

The pseudocode for Minor.cfc is:

SELECT * FROM tblMinor WHERE MajorID=#arguments.MajorID#

I’d like to remove the onChange event where it submits the form, and instead have jQuery populate the second select list via Ajax. I know that there’s a Spry example of this, but I’m already using jQuery and would prefer to use it instead of add a second framework into the project.

I know I’ll have to change the WhereMajorID function inside of Minor.cfc to access=”remote”, but I’m pretty bad with the whole looping inside of javaScript thing.

$('#MajorID').change(function() {
   // $.post magic happens here
});

I hope I’ve made myself clear with this question.

Answer 1

If you are on ColdFusion 8 or higher you can use the data binding feature of cfselect. Ben Forta has a great post about it here

Here is a little code sample:

<cfform>

<table>
    <tr>
        <td>Select Media Type:</td>
        <td><cfselect name="mediaid"
                bind="cfc:art.getMedia()"
                bindonload="true" /></td>
    </tr>
    <tr>
        <td>Select Art:</td>
        <td><cfselect name="artid"
                bind="cfc:art.getArt({mediaid})" /></td>
    </tr>
</table>

</cfform>