Question

我正在尝试使用数据库数据填充HTML下拉列表。为此，我正在从数据库中检索数据并创建选项元素，如下所示：

var obj = eval("(" + data + ")");
for (i = 1; i <= obj.DATA.length; i++) {
    var col_val = obj.DATA[i - 1];
    $("#dropdown").append('<option value="' + col_val + '">' + col_val + '</option>');
}

我尝试了另一种方法，如下所示：

$("#dropdown").html(data);

其中，data是一个字符串，包含在使用cfloop循环数据库查询后被调用的CFC页面返回的选项元素列表。

在添加新选项之前，我使用以下任一语句删除旧选项。

$('#dropdown').empty(); 

$('#dropdown option').remove();

$('#dropdown').html('');

经过分析，我发现删除选项会导致最大延迟。

是否有更快的备用JavaScript或Jquery函数可用于删除选项？或者您是否建议任何改善性能的方法？

注意：我必须使用ColdFusion＆amp; AJAX就是出于此目的。另外，我不能使用ColdFusion的内置AJAX功能。

谢谢！

Answer 1

我通常从ajax请求返回html，所以响应看起来像

<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
...

然后只需使用$("#selectName").html(data);使用现在包含一堆选项标记的响应填充select。

Answer 2

ColdFusion未定义错误可能是因为缺少您到/ CFIDE / scripts文件夹的虚拟映射，您可以从类似的CF安装中手动将其复制到您的webroot中以解决此问题或修复您的安装。

Answer 3

在循环的每次迭代中，您都会跳转到DOM。退出循环后，您需要执行$（“＃dropdown”）操作。

Answer 4

如果您通过ajax获取选项，您应该能够运行firefox Firebug控制台并查看获取数据所需的确切时间。这将证明问题是下载时间与渲染时间之间的关系。还要考虑：查询缓存，将js数组或列表写入js文件并在CF上使用直接js或减少选项数量（我无法通过5k选项滚动图像）
您也可以尝试将数据作为列表下载并使用
```
str.replace(',','<option>') 
```

“包装”选项标签中的每个列表项。请记住：如果值和文本相同，则不必具有value参数。 AND：您不必关闭选项标记：

    <option>1<option>2<option>3...<option>N

最后，如果这仍然太慢，那么我建议使用延迟加载程序以更易于管理的块加载您的选项。您甚至可以触发延迟加载程序以继续加载块，而不管用户操作如何（使用settimeout）。

希望这有帮助。

Answer 5

使用此语法仅使用Coldfusion可能会有所帮助

<CFSELECT NAME="name"
    REQUIRED="Yes/No"
    MESSAGE="text"
    ONERROR="text"
    SIZE="integer"
    MULTIPLE="Yes/No"
    QUERY="queryname"
    SELECTED="column_value"
    VALUE="text"
    DISPLAY="text"
    PASSTHROUGH="HTML_attributes">

</CFSELECT>

在查询属性附近，您可以传递查询名称。

使用Jquery Ajax＆amp ;;下拉人口CFC

5 个答案: