javascript - <option>标签，显示:none and jquery

Question

我有一个div被用作 jQuery 的 .dialog() 的对话框。该 div 有一个带有选项的选择框。用户已选择的选项显示在主页上。他们可以从主页中删除选项，也可以多次打开对话框以添加更多选项。

我在页面加载时使用所有可能的选项填充选择框，但是当我打开对话框时，我使用 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(); 
  }); 

});