渲染 20 个大的相同列表框答案

【问题标题】：Rendering 20 large identical listBoxes渲染 20 个大的相同列表框
【发布时间】：2010-01-05 09:39:38
【问题描述】：

我有一个带有行（20 行）的 HTML 表格。每行都有一个国家列表框（大约 250 个国家/地区），这些国家/地区使用数据库中的单个数据集填充。

加载时间足够快，但渲染时间真的很乱。有什么方法可以加快这些列表框的渲染速度？

【问题讨论】：

我刚刚在我的答案中添加了一些代码
稍微更新了我的答案。

标签： html listbox render

【解决方案1】：

你可以只加载一次，然后将 DOM 元素复制到任何你需要的地方......

我不确定这是否会改进很多，因为它会更多地依赖用户的计算机，但我想如果它现在的速度太慢的话值得尝试。

编辑：这就是我的做法。谨慎使用，我没有测试过，这段代码很可能有很多错误，这只是为了让你了解我在说什么。

<mylistbox id="listboxtemplate"> ... </>

<div class="thisPlaceNeedsAListbox"></div>
<div class="thisPlaceNeedsAListbox"></div>
<div class="thisPlaceNeedsAListbox"></div>

文档准备就绪，使用 jquery：

jQuery(".thisPlaceNeedsAListbox").append( jQuery("#listboxtemplate").clone() )

【讨论】：

我试试看（虽然我会把jquery翻译成mootools）
你也可以链接clone()，这样会更好。但我现在没有那么多时间去做

【解决方案2】：

只有在用户选择了前一个选择框后（使用 JavaScript），您才可以尝试添加下一个选择框。

我很确定您可以重新考虑表格或流程，但由于您没有提供足够的信息，因此我无法提出任何具体建议。例如，根据情况，您可以使用多选或一些花哨的 JavaScript 小部件。

根据您的评论进行编辑：

那么如何在没有选择的情况下为表提供服务。如果用户双击国家/地区字段，您可以使用 javascript 将文本元素更改为选择元素。一旦用户选择了国家，您就可以改回文本元素。您可以使用 Ajax（在用户选择国家后）或使用隐藏字段的提交按钮将结果提交回服务器。这样 DOM 将永远不会包含超过 1 个选择元素。

您可以使用内联 JSON 对象/数组（在脚本标签中）将国家/地区传递给 javascript。为了在用户编辑第一个元素后让事情变得更快，只需隐藏 (css: display: none;) 第一个构建选择元素并在每次用户想要编辑一行时克隆/移动它。

正如您所见，使用这种方法可以采取多种途径，这完全取决于您想要优化/工作多少。

【讨论】：

喜欢这个主意！！我会给你“正确的答案”，但这是一种解决方法，而不是回答确切的问题。尽管如此 - 这就是我将使用的方向。