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

如果下面的菜单使用Javascript，我将如何遍历所有选项并逐个删除它们？然后将它们全部重新添加。我不想在加载jQuery时删除选择菜单本身：

var options = $('#menu').children();
children.remove();
$('#menu').insert(children);

在不同的图书馆中也是如此

如果没有库，您需要做更多的工作：）

您的HTML：

<select id="menu" onchange="go()">
    <option>--Select a page--</option>
    <option value="1">W3Schools</option>
    <option value="2">Microsoft</option>
    <option value="3">AltaVista</option>
</select>
<input id="remove" type="button" value="remove one" >
<input id="repop" type="button" value="repop">

---

这里有一种使用香草JavaScript的方法

以下是标记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>

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

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;
}

---

您的意思是克隆选项以保留默认选项，然后同时删除并重新添加所有选项保持选择菜单的右侧？

//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;

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;
}