javascript - 标签，显示: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(); 
  }); 

});