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(); 
  }); 

});

Answer 2

我会在修改选项列表之前克隆选项列表并保留原文。这样你就可以通过用orignal替换修改过的那个来重新插入它。

<option>标签，display：none和jquery </option>

2 个答案: