IEとSafariでJQuery非表示オプションが機能しない

Question

.hide（）を使用してドロップダウンボックスでいくつかのオプションを非表示にしようとしています。これはFirefoxとChromeで完璧に動作しますが、IEとSafariでは動作しません。私の元のコードはより複雑ですが、私はこれに絞っています。

私はいくつかの組み合わせを試みましたが、何も機能しませんでした。

.hide（）は動作しますが、何らかの理由でオプションタグ内のものでは機能しません。

誰かお手伝いできますか？これは私をナットにしている。時間のお手伝いをしてくれてありがとう！

<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

そうだね

は、ここに私のJScriptです。一部のブラウザでは、option要素を非表示にすることはできません。おそらくそれらを削除する必要があります。

おそらくより良い（または少なくとも代替）可能性は、それらを無効にすることです。

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

Answer 2

あなたはdisplay:noneでそれらを隠しては、多くのブラウザではサポートされていません。.. optionの要素を削除する必要があります。

HIDE

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

SHOW

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

Answer 3

これは...仕事.showOptionと.hideOptionに.SHOW変更されます。 しかし、これはまだIEの中ではうまくいきません。なぜなら、Firefoxでは選択されているオプションを隠すことができるからです。したがって、「Select One」が表示され、非表示になっているとします。 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); 

が、私はこのために1つの回避策を見つけた完全な実装 http://jsfiddle.net/8uxD7/3/

Answer 6

で、ジャストに（））ラップjQueryを使ってラップ自動的に非表示になり、unwrap（）でスパンを展開して再度表示します。