<option> 标签、display:none 和 jquery答案

【问题标题】：<option> tag, display:none and jquery<option> 标签、display:none 和 jquery
【发布时间】：2010-01-18 21:03:08
【问题描述】：

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

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

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

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

【问题讨论】：

对了，欢迎来到 StackOverflow asdf1234！第一个问题令人印象深刻！
看看其他新用户问了什么，你最终会明白为什么:)

标签： javascript jquery

【解决方案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(); 
  }); 

});

【讨论】：

【解决方案2】：

我会在修改之前克隆选项列表并保留原始列表。这样一来，您就可以通过将修改后的替换为原始的来将其重新插入干净。

【讨论】：