JQuery छुपा विकल्प आईई और सफारी

Question

में काम नहीं करता है। मैं hide() का उपयोग कर ड्रॉपडाउन बॉक्स में कुछ विकल्प छिपाने की कोशिश कर रहा हूं। यह फ़ायरफ़ॉक्स और क्रोम में पूरी तरह से ठीक काम करता है, लेकिन यह आईई और सफारी में काम नहीं करता है। मेरा मूल कोड अधिक जटिल है लेकिन मैंने इसे नीचे संकुचित कर दिया है।

मैंने कई संयोजनों की कोशिश की है और कुछ भी काम नहीं किया है।

.hide() काम करता है, लेकिन कुछ कारणों से विकल्प टैग के भीतर चीजों के लिए नहीं।

क्या कोई मेरी मदद कर सकता है? यह मुझे पागल कर देता है। समय सहायता लेने के लिए बहुत बहुत धन्यवाद!

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

यहाँ एचटीएमएल है::

   <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

आप .. option तत्वों को दूर करने के लिए है उन्हें display:none साथ छुपा कई ब्राउज़रों में समर्थित नहीं है।

छुपाएं

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

शो

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

Answer 3

यह .. काम करेंगे .showOption और .hideOption को .show बदल जाते हैं। हालांकि यह अभी भी आईई में बेकार है क्योंकि फ़ायरफ़ॉक्स में आप इसे एक विकल्प चुन सकते हैं जिसे चुना गया है। तो यदि "एक का चयन करें" दिखाया गया है और छुपा हुआ है। फ़ायरफ़ॉक्स अभी भी "एक का चयन करें" कहेंगे।

$.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'); 

आप को छिपाने और उन्हें जितना आप चाहते हैं के रूप में दिखा सकते हैं, और वे उनके मूल क्रम में और किसी भी .data('x') मूल्यों आप option को निर्दिष्ट किए गए रखेंगे। यह सभी ब्राउज़रों में काम करता है। आप देख सकते हैं कि इस नमूने में: jsFiddle - Toggle Dropdown Options

आप Toggle Dropdown Options plug-in प्राप्त कर सकते हैं। यदि आपको प्लग-इन पसंद नहीं हैं, तो बस जावास्क्रिप्ट कोड को अपनी परियोजना की जावास्क्रिप्ट फ़ाइल में कॉपी करें। अधिक जानकारी के लिए प्लग-इन पर 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 के साथ रैप()) को लपेट जिस विकल्प को आप छिपाना चाहते हैं, वह इसे फिर से दिखाने के लिए स्वचालित रूप से छुपाएगा और अनचाहे() को अनचाहे कर देगा।