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的数据绑定功能。本福塔有一篇很棒的帖子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>

Answer 2

我对Coldfusion知之甚少，但我确实知道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");
});

jQuery填充第二个选择列表

2 个答案: