jQuery to populate a 2nd select list

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

I don't know much about Coldfusion, but I do know jQuery:

// Bind logic to the change event of the first SELECT
$("#firstSelect").change(function(){
  // Get currently-selected value
  var option = $(this).val();
  // Pass value to a server-side script through id of 'majorID'
  $.post("somepage.php", { 'majorID':option }, function(data) {
    // Remove all options from second SELECT
    $("#secondSelect option").remove();
    // Cycle through returned 'data' variable: i = index, o = object
    $(data).each(function(i,o){
      // Add new option to second SELECT
      $("#secondSelect").append( $("<option>").val(i).text(this) );
    });
  // This indicates the type of data we expect back
  }, "json");
});

Answer 2

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>