jQuery填充第二个选择列表

Question

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的数据绑定功能.Ben Forta 在这里发表了一篇很棒的文章

这是一个小代码示例:

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