标签，显示：none和jquery

Question

我有一个div被用作jQuery的.dialog()的对话框。这个div有一个选项框。用户已经选择的选项显示在主页面上。他们可以从主页面中删除选项，并可以多次打开对话框以添加更多选项。<option>标签，显示：none和jquery

我使用页面加载时填充所有可能选项的选择框，但是当我打开对话框时，我使用jQuery的hide()来隐藏用户已经选择并显示在主页上的选项。这会将CSS display:none;添加到所讨论的元素中，IE忽略<option>标记和显示。

我可以很容易地调用remove()，并将其从DOM中移除。但是，如果用户选择某些选项，则它们会在主页面上将它们删除，然后再次打开对话框以选择更多选项，选项不再按字母顺序排列，从DOM中删除并放回的选项是现在在我使用.append()以来的最低点。

有什么办法让IE隐藏<option>标签？还是有更好的方法来做到这一点？或者有没有简单的按字母顺序插入的方法？

Answer 1

如果您需要从DOM中删除它，您可以将选项存储在一个数组中。一个数组（或对象）为每个选项列表。然后从列表中删除选项本身是可逆的。您始终可以重新从阵列重建选择菜单。只要dom-ready事件触发就填充数组。

在线演示：http://jsbin.com/avuru

$(function(){ 

    // Define variables to be used throughout this code 
    var colors  = []; 
    var list  = $("select[name='colors']"); 
    var btnRestore = $("button[name='restore']"); 
    var btnRemove = $("button[name='remove']"); 

    // Cycle through each option, adding its value and text to our collection 
    $("option", list).each(function(i, o){ 
    colors.push({ 'key':$(this).val(),'val':$(this).text() }); 
    }); 

    // Remove any remaining options, and add collection back into dropdownlist 
    $(btnRestore).click(function(){ 
    $("option", list).remove(); 
    for (var i = 0; i < colors.length; i++) { 
     $("<option>").val(colors[i].key).text(colors[i].val).appendTo(list); 
    } 
    }); 

    // Remove first option from list - used to test 'Restore' functionality 
    $(btnRemove).click(function(){ 
    $("option:first", list).remove(); 
    }); 

}); 

Answer 2

我会克隆选项列表修改之前，并保持原有的周围。这样，你可以重新插入干净，通过用orignal替换修改的干净。