使用AJAX填充选择列表

所以我是一个真正的JQUERY新手，所以请放轻松我。

我想使用从CFC返回的数据填充CFSELECT。 这是我的工作CFC：

   select description from service_descriptions where description "ADD NEW" order by description     

以下是我的CFC数据的返回方式：

—->从列表中选择<—-备份MaintenanceMalware RemovalMonthly Server MaintenanceNetwatch Alert – 高CPU使用率Netwatch警报 – CNetwatch备份上的磁盘空间不足AlertNew员工培训每月在工作站上进行调整测试测试2测试4测试每周一次维护白名单请求

我正在使用我的AJAX代码来填充我的CFSELECT表单元素。

  ADD NEW  

这是我到目前为止用我的AJAX但它不起作用。

   $(document).ready(function CheckAjaxCall() { $.ajax({ type:'POST', url:'cfcs/get_descriptions.cfc?method=getDescriptions', dataType:'json', cache:false, success:function(customDescriptions){ $('##descriptionDD4').get(0).options.length = 0; $('##descriptionDD4').get(0).options[0] = new Option("--Select--", "0"); $.each(description, function(i,item) { $('##descriptionDD4').get(0).options[$('##descriptionDD4').get(0).options.length] = new Option(item[i].Name, item[i].roll); // Display Value }); }, //error:function(){alert("Connection Is Not Available");} }); return false; });  

任何帮助将不胜感激。 谢谢。 布赖恩

Answer 1

注意：默认情况下，CF序列化查询的方式很糟糕。 从长远来看，你可能想要自己滚动并返回更典型（和直观）的东西，就像一组结构。 但是，仍然值得理解为什么你当前的代码不起作用，IMO。

问题：

正如斯科特指出的那样 ，最大的问题是你的javascript代码需要一种格式，但你的cfc会返回不同的格式。 您需要更改其中一个，因此它们都是同步的。 另外，正如我在评论中提到的，使用cfselect并不会在这里购买任何东西，所以只需使用普通的html select 。

调试：

在您对CFC的响应做任何事情之前，您需要了解它发回的格式。 简单地开始。 只需在页面加载时调用cffunction并将响应记录到控制台。 在工作之后，您可以稍后将所有内容包装在函数中。

使用FF的Web控制台，您将看到结果是包含两个键的结构： COLUMNS和DATA 。

DATA是一个包含查询结果的多维数组。 它由行号和列号索引。 你可以循环遍历它，就像在CF中一样。 唯一的区别是索引将基于零（当然，JS中的键名称区分大小写）。 将以下代码添加到您的success函数中，您将看到Web控制台中显示的查询值。

  // display values for debugging purposes for (var i = 0; i < response.DATA.length; i++){ console.log("value in row ["+ i +"] column [0] = "+ response.DATA[i][0]); } 

用法：

一旦了解了如何访问数据，只需使用它来填充列表即可。 您可以使用for循环单独附加选项，也可以使用此处描述的方法将 DATA数组插入$.each函数。 由于您的查询仅返回单个列，因此我将其用于选项文本和值。

 $.each(response.DATA, function(i, row){ // get value in first column ie "description" var description = row[0]; // append new option to list $("#descriptionDD4").append($('', { value: description, text : description })); }); 

剩下的就是将ajax调用包装在一个可以在需要的地方调用的函数中。 但你应该能够自己解决这个问题。

希望这有点说明使用jQuery的远程cffunction。