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