JQuery隱藏選項不適用於IE和Safari

Question

我試圖在下拉框中使用.hide（）隱藏一些選項。這在Firefox和Chrome中運行得非常好，但在IE和Safari中不起作用。我原來的代碼更復雜，但我已經縮小到這個範圍。

我試過幾種組合，沒有任何工作。

.hide（）起作用，但出於某種原因，不適用於選項標籤中的內容。

有人可以幫我嗎？這讓我瘋狂。非常感謝您花時間幫忙！

這裏是我的JScript：

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $(".wrapper1").hide(); 
     }); 
    </script> 

這裏的HTML：

   <label for="prodName">Product Name:</label> 
       <input type="text" name="prodName" /><br /> 

       <label for="candy">Candy:</label> 
       <select name="candy" id="candy"> 
         <option value="0" class="blank" selected="selected"></option><!-- PHP and JS validators should not allow "0" here. User should be prompted to select something. --> 
         <option value="1" class="wrapper1">Hide this 1</option> 
         <option value="2" class="wrapper1">Hide this 2</option> 
         <option value="3" class="wrapper2">Show this 1</option>  
       </select><br /> 

Answer 1

你說得對。有些瀏覽器不會讓你隱藏option元素。您可能需要刪除它們。

儘管也許更好的（或至少是替代的）可能性是禁用它們。

$(".wrapper1").prop('disbled', true); 

Answer 2

您必須刪除option元素。與display:none隱藏他們是不是在多種瀏覽器支持。

隱藏

var elems = $(".wrapper1").remove(); 

SHOW

$('#candy').append(elems); 

Answer 3

這將工作..改變.show到.showOption和.hideOption。 然而，這仍然是一種在IE中糟糕的，因爲在Firefox中，你可以隱藏一個被選中的選項。所以如果「選擇一個」被顯示並被隱藏。 Firefox仍然會說「選擇一個」。

$.fn.showOption = function() { 
this.each(function() { 
    if(this.tagName == "OPTION") { 
     var opt = this; 
     if($(this).parent().get(0).tagName == "SPAN") { 
      var span = $(this).parent().get(0); 
      $(span).replaceWith(opt); 
      $(span).remove(); 
     } 
     opt.disabled = false; 
     $(opt).show(); 
    } 
}); 
return this; 
} 
$.fn.hideOption = function() { 
this.each(function() { 
    if(this.tagName == "OPTION") { 
     var opt = this; 
     if($(this).parent().get(0).tagName == "SPAN") { 
      var span = $(this).parent().get(0); 
      $(span).hide(); 
     } else { 
      $(opt).wrap("span").hide(); 
     } 
     opt.disabled = true; 
    } 
}); 
return this; 
} 

Answer 4

我想，大約使用選項<span>的解決方案，但發現它並沒有在所有瀏覽器爲我工作。

我做了一個jQuery插件，很好地解決了這個問題。有了它，你可以這樣做：

$('#selection1').hideOption('1'); 
$('#selection1').showOption('1'); 

您可以隱藏和顯示你希望他們儘可能多的，他們將保持其原有的秩序，你已經分配給option任何.data('x')值。它適用於所有瀏覽器。你可以看到在這個例子中：jsFiddle - Toggle Dropdown Options

你可以得到Toggle Dropdown Options plug-in。如果您不喜歡插件，只需將其中的JavaScript代碼複製到您自己的項目的JavaScript文件中即可。請參閱插件上的Read the Docs鏈接以獲取更多信息！

Answer 5

我嘗試了很多不同的方式，但這個解決方案看起來很合理，我已經在我的代碼中使用了。無需插件簡單的寄存器功能與jQuery對象在一目瞭然

解決方案：

(function ($) { 


$('#showOne').click(function() { 
    $('#ddlNumbers').showHideDropdownOptions('3', true); 
}); 

$('#hideOne').click(function() { 
    $('#ddlNumbers').showHideDropdownOptions('3', false); 
}); 

$.fn.showHideDropdownOptions = function(value, canShowOption) { 

     $(this).find('option[value="' + value + '"]').map(function() { 
      return $(this).parent('span').length === 0 ? this : null; 
     }).wrap('<span>').hide(); 

     if (canShowOption) 
      $(this).find('option[value="' + value + '"]').unwrap().show(); 
     else 
      $(this).find('option[value="' + value + '"]').hide(); 

} 



})(jQuery); 

下面是完整的實現http://jsfiddle.net/8uxD7/3/

Answer 6

我找到一個辦法解決這個，只是使用jQuery包裹包裹（））來選項要隱藏，它會自動隱藏並用unwrap（）展開展開以再次顯示它。