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

Question

使用Javascript给出以下菜单http://jsfiddle.net/pYJPc/，我将如何迭代所有选项并逐个删除它们？然后重新添加它们。我不想选择菜单本身在所有

Answer 1

使用jQuery加载被删除：

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

同样，在不同的库也是如此。

没有图书馆，你需要多一点的工作:)

Answer 2

你的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"> 

而且使用jQuery

var buffer=new Array(); 
$("#remove").click(function() { 
    buffer.push($("option:first").get(0)); 
    $("option:first").remove(); 
}); 
$("#repop").click(function() { 
    $("select").append(buffer); 
}); 

Answer 3

这里你的JS是做这件事使用香草JavaScript JSFiddle Demo:

这里是标记HTML：使用cloneNode备份您的默认选择选项

//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原来并没有真正克隆它：如果没有选项和deleteOption将删除所有的选项中选择你的标签将addOption添加备份恢复您的选择。所以，我们必须创建自己的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; 
}