JQuery Hide Option no funciona en IE y Safari

Question

Estoy tratando de ocultar algunas opciones en un cuadro desplegable usando .hide(). Esto funciona perfectamente bien en Firefox y Chrome, pero no funciona en IE y Safari. Mi código original es más complejo, pero lo he reducido a esto.

He intentado varias combinaciones y nada ha funcionado.

.hide() funciona, pero no para cosas dentro de etiquetas de opción por alguna razón.

¿Alguien puede ayudarme? Esto me está volviendo loco. ¡Muchas gracias por tomarse la ayuda del tiempo!

Aquí es mi JScript:

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

Aquí está el código 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

Tienes razón. Algunos navegadores simplemente no te permiten ocultar option elementos. Es probable que necesites eliminarlos.

Aunque quizás una posibilidad mejor (o al menos alternativa) sería deshabilitarlos.

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

Answer 2

usted tiene que quitar los elementos option .. ocultándolos con display:none no se admite en muchos navegadores.

OCULTAR

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

MOSTRAR

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

Answer 3

Esto funcionará .. cambiar .show a .showOption y .hideOption. Sin embargo, esto todavía apesta en IE porque en Firefox puede hacer que oculte una opción que está seleccionada. Entonces, si se muestra "Seleccionar uno" y está oculto. Firefox aún dirá "seleccionar uno".

$.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

Probé la solución que utiliza <span> alrededor de opciones, pero se encontró que no funcionó para mí en todos los navegadores.

He creado un complemento jQuery que lo resuelve muy bien. Con él, usted podría hacer esto:

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

Puede ocultar y mostrar tanto como usted desea, y que va a mantener su orden original y cualquier .data('x') valores que ha asignado a la option. Funciona en todos los navegadores. Puede ver que en esta muestra: jsFiddle - Toggle Dropdown Options

Puede obtener el Toggle Dropdown Options plug-in. Si no le gustan los complementos, simplemente copie el código JavaScript de este en el archivo JavaScript de su proyecto. ¡Vea el enlace Read the Docs en el complemento para más información!

Answer 5

Lo intenté de muchas maneras diferentes pero esta solución parece razonable y la he usado en mi código.No hay plugins necesarios función de registro sencillo con objeto jQuery

solución a simple vista:

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

Aquí es la implementación completa http://jsfiddle.net/8uxD7/3/

Answer 6

encontré una solución para esto, sólo se envuelven con jQuery envolver()) para opción que desea ocultar, se ocultará automáticamente y desplegará span con unwrap() para mostrarlo nuevamente.