jQuery 填充第二个选择列表答案

【问题标题】：jQuery to populate a 2nd select listjQuery 填充第二个选择列表
【发布时间】：2011-01-10 00:42:21
【问题描述】：

有一个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
});

我希望我已经明确了这个问题。

【问题讨论】：

嗯.. 我不太擅长这个，但让我们试一试。 Minor.cfc 是服务器端，对吧？它给出了什么样的输出？
如果您想使用 JSON，这篇文章可能会对您有所帮助：stackoverflow.com/questions/2031865/…
Minor.cfc 可以提供任何你想要的输出。

标签： jquery coldfusion

【解决方案1】：

如果您使用的是 ColdFusion 8 或更高版本，则可以使用 cfselect 的数据绑定功能。 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>

【讨论】：

Sam Farmer，单线之王！

【解决方案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");
});

【讨论】：