javascript - 从选择菜单中删除然后重新添加选项元素？

Question

给定以下菜单http://jsfiddle.net/pYJPc/使用Javascript，我如何遍历所有选项并将它们一一删除？然后重新添加它们。我根本不想删除选择菜单本身

Answer 1

这是使用 Vanilla JavaScript 的一种方法 JSFiddle Demo:

这是标记 HTML:

<select id="myselect">
    <option value='none'>--Select a page--</option>
    <option value="1">W3Schools</option>
    <option value="2">Microsoft</option>
    <option value="3">AltaVista</option>
</select>
<br/><br/>
<button value='add' id='addbtn' name='addbtn'>add</button>
<button value='delete' id='deletebtn' name='deletebtn'>delete</button>

使用cloneNode备份您的默认选择选项。如果没有选项，addOption 会将备份添加回您的选择，deleteOption 将删除您选择标签中的所有选项:

//clone our options to a backup
var myselect = document.getElementById('myselect');
var backup = myselect.cloneNode(true).getElementsByTagName('option');
//add backup back into select
function addOption() {
    if (myselect.options.length == 0) {
        for (var i = 0; i < backup.length; i++) {
            myselect.options.add(backup[i].cloneNode(true));
        }
    }
}
//delete all option in select
function deleteOption() {
    while (myselect.options.length != 0) {
        myselect.options.remove(myselect.options.length - 1);
    }
}
//attach click event to btns
document.getElementById('addbtn').onclick = addOption;
document.getElementById('deletebtn').onclick = deleteOption;

事实证明，在 IE 中，cloneNode 并没有真正克隆它。因此，我们必须创建自己的克隆节点，并将备份更改为:

var backup = IEcloneNode(myselect).getElementsByTagName('option');

//FOR IE 
//Reference http://brooknovak.wordpress.com/2009/08/23/ies-clonenode-doesnt-actually-clone/
function IEcloneNode(node) {
    // If the node is a text node, then re-create it rather than clone it
    var clone = node.nodeType == 3 ? document.createTextNode(node.nodeValue) : node.cloneNode(false);
    // Recurse
    var child = node.firstChild;
    while(child) {
        clone.appendChild(IEcloneNode(child));
        child = child.nextSibling;
    }

    return clone;
}