存储/生成<select>选项供以后使用？

Question

我有一些javascript，它可以动态生成大量的<select>选项（<option>）元素列表。而且我需要能够使用“onchange”事件根据另一个<select>菜单的值在3个或4个不同的生成列表之间切换。

有没有一种方法可以存储多个选项列表，然后根据需要将选择对象重定向到适当的列表？

现在，我必须删除所有选项，并重新添加一个。这似乎非常浪费/耗时。

Answer 1

你可以存储选项的不同列表作为简单数组，然后做这样的事情：

function setThisSelect(selectId, optionsArray){ 
    var sel = document.getElementById(selectId); 
    sel.options.length = 0; 
    for (var i = 0; i < optionsArray.length; i++) 
     sel.options.add(optionsArray[i]); 
} 

而且这里是你如何可以创建你的选择：

var optionsArr1 = []; 
    for (var i = 0; i < 5; i++) { 
     var op = document.createElement("option"); 
     op.value = i; 
     op.text = i; 
     optionsArr1.push(op); 
    } 

这里有一个fiddle：

但是，如果你想要做很多这个，它可能会很快乏味。这可能是像jQuery这样的库可以帮助完成的代码少得多。

Answer 2

似乎它是jQuery模板的完美例子。 您可以将每个案例的所有数据存储为json。创建一个<的模板，选择>元素。当用户改变某个参数时，你会选择一个合适的json并绑定到一个模板。你可以找到例子here。

Answer 3

DocumentFragments可能是你要找的。

http://ejohn.org/blog/dom-documentfragments/

此外，各种操作 - 如插入节点作为孩子另一节点的 - 可采取的DocumentFragment对象作为参数; 这会导致DocumentFragment的所有子节点都被移动到此节点的子列表中，即 。