Question

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

有没有办法可以存储多个选项列表，然后根据需要将select对象重定向到相应的列表？

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

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

DocumentFragments可能就是您所需要的。

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

此外，还有各种操作 - 例如将节点作为子节点插入另一个Node - 可以将DocumentFragment对象作为参数; 这会导致DocumentFragment的所有子节点都存在移动到此节点的子列表。

Answer 3

似乎它是jQuery模板的完美案例。您可以将每个案例的所有数据存储为json。创建＆lt; select＆gt;的模板元件。当用户更改某些参数时，您将选择一个合适的json并绑定到模板。您可以找到示例here。

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

3 个答案: