Javascript 加载选项列表一次并将其渲染到客户端的多个选择框？

在我的Rails 3.2应用程序中，我有一个类似于相册的页面，其中显示了许多照片。在每张照片下面都有一个选择框，用户可以从中选择许多选项，格式如下：

<select id="photo_1">
  <option value=value_1>Name of Value 1</option>
  ...
  <option value=value_n>Name of Value N</option>
</select>

值1的名称
...
值N的名称

问题是，值的列表很长（100种可能性），但每张照片的值完全相同。由于每个相册可能有几十张照片，因此每次将照片加载到页面时让服务器发送完整列表似乎效率低下。有没有更有效的方法来实现这一点，例如加载

  <option value=value_1>Name of Value 1</option>
  ...
  <option value=value_n>Name of Value N</option>

值1的名称
...
值N的名称

---

当相册页面生成时（可能作为隐藏字段）只需访问一次，然后在将照片加载到页面时，使用jQuery/javascript将其填充到客户端照片的唯一标记中？（注意：照片是动态加载的，因此一些照片可能会在用户上载相册页面时在初始加载后加载。）

您只需将选项复制到其他元素即可

HTML

<select id="photo_1">
  <option value="value_">Pick</option>    
  <option value="value_1">Name of Value 1</option>
  <option value="value_2">Name of Value 2</option>
  <option value="value_3">Name of Value 3</option>
</select>
<select class="copy"></select>
<select class="copy"></select>

---

示例：

如果需要它的

有一个公共类会更好，但这适用于ID以

照片开始的任何
（尽管您可能应该使用
名称而不是
ID
）

使用单独的隐藏元素作为模板可能更容易。这样，创建所有选择项的脚本就不必对第一个进行特殊处理。@Barmar和您的示例将不会验证，因为选项应该位于选择元素中，而不是div中。与其添加类，不如在选择器中选择第一个并忽略第一个。谢谢--回答得很好，但我倾向于同意Barmar的观点：使用单独的隐藏元素作为模板更容易，而不是第一次选择的特例，特别是因为我的应用程序以相同的方式呈现所有照片部分（没有选项的空选择）。如果将选项粘贴到“模板”中，请确保其有效性。：）id^=photo比普通类或元素慢。您测试过这个跨浏览器吗？IE不太可能接受
作为DIV的孩子你是对的，我用一个隐藏的SELECT替换了隐藏的DIV。见更新的小提琴。
var mainSelectOptions = $("#photo_1 option").clone();
var selects = jQuery(".copy").append(mainSelectOptions);

$(function () {
    $("select[id^=photo]").each(function () {
       $(this).html($("#hidden_select").html());
    });
});​