jQuery 填充第二个选择列表

Question

有一个similar question on stackoverflow ，但我想再问一遍，因为 ColdFusion 与 PHP 不同。我有两个选择列表，第二个列表是从第一个列表填充的。

<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>

Minor.cfc 的伪代码是:

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

我想删除提交表单的 onChange 事件，而是让 jQuery 通过 Ajax 填充第二个选择列表。我知道有一个 Spry 示例，但我已经在使用 jQuery，并且更愿意使用它而不是在项目中添加第二个框架。

我知道我必须将 Minor.cfc 中的 WhereMajorID 函数更改为 access="remote"，但我对 javaScript 内部的整个循环感到非常糟糕。

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

我希望我已经清楚地回答了这个问题。

Answer 1

如果您使用的是 ColdFusion 8 或更高版本，则可以使用 cfselect 的数据绑定(bind)功能。 Ben Forta 有一篇很棒的文章 about it here

这是一个小代码示例:

<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>