¿Ocultar opciones en el elemento seleccionado, no funciona en IE?

Duplicar posible:
Hide select option in IE using jQuery ¿Ocultar opciones en el elemento seleccionado, no funciona en IE?

Así como se puede ver a continuación, tengo dos elementos selectos. El primero tiene dos valores, 1.4 y 1.7. Dependiendo de la opción que se seleccione, quiero deshabilitar ciertas opciones en el segundo elemento de selección. Funciona perfectamente bien en Chrome, pero IE es una perra (¡como de costumbre!).

¿Alguna idea de qué pasa?

<p> 
    <label style="width: 155px; display: inline-block;">Height</label> 
    <select name="height"> 
     <option value="1.4">1.4</option> 
     <option value="1.7">1.7</option> 
    </select> 
</p> 
<p> 
    <label style="width: 155px; display: inline-block;">Amount</label> 
    <select name="slanor"> 
     <option class="four" value="2">2</option> 
     <option class="four seven" value="3">3</option> 
     <option class="seven" value="4">4</option> 
    </select> 
</p> 


<script> 
$(document).ready(function() { 
    check(); 

    $('select[name=height]').change(function() { 
     check(); 
    }); 

    function check() { 
     var slanor = $('select[name=slanor]'); 
     var currHeight = $('select[name=height]').val(); 

     if(currHeight == '1.4') { 
      slanor.find('option').hide(); 
      slanor.find('.four').show(); 
     } else { 
      slanor.find('option').hide(); 
      slanor.find('.seven').show(); 
     } 
    } 
}); 
</script>

Fuente

2011-11-17 qwerty

lo que no funciona? ¿Obtiene el valor correcto para la altura? (Ejecute 'console.log (currHeight)' para averiguarlo) – lonesomeday

Deje de etiquetar sus títulos, por favor. ¡Has estado aquí casi dos años! –

La noción de options escondido en un select no existe en el IE. Tendría que eliminar manualmente y volver a agregar las entradas, lo que puede ser un inconveniente.

Otra solución sería la de desactivar también los elementos:

slanor.find(option).hide().prop('disabled', true);

Esto ocultará la opción en todos los navegadores que lo soportan, pero desactivarlo en el IE, lo que significa que todavía va a ser visible, pero visualmente distinguido de las otras opciones, y no seleccionable.

Sin embargo: si su problema es exactamente como usted ha descrito, y sólo hay dos opciones que la secuencia de comandos variará en adelante, la solución más simple podría ser la de hide y show dos menús desplegables diferentes por completo, dependiendo de cuál es la opción seleccionado.

Fuente

2011-11-17 15:26:14

Hmm, sí, eso funcionaría. Intenté configurarlo como deshabilitado, pero parece que no funciona en IE 7/6. Me gustaría tener soporte para al menos IE 7. Supongo que la única opción que queda es tener dos cuadros de selección. ¡Gracias! – qwerty

Llamar .hide() en jQuery agrega display: none al elemento. Dudo que sea HTML estándar que pueda ocultar las opciones de esta manera.

Se podría utilizar este código en su lugar:

slanor.empty(); 
if (currHeight == '1.4') { 
    slanor.append($('<option'>).val('2').text('2')); 
    slanor.append($('<option'>).val('3').text('3')); 
} 
else { 
    slanor.append($('<option'>).val('3').text('3')); 
    slanor.append($('<option'>).val('4').text('4')); 
}

Fuente

2011-11-17 15:29:49

Puede encontrar la respuesta deseada en esta publicación: - http://stackoverflow.com/questions/29690181/how-to-disable-hide-select-options-using-css-in-ie/29690622#29690622 – Nitesh

etiqueta La opción no admite el atributo de visualización CSS. Que es lo que show()/hide() hace. Su mejor opción es eliminar y volver a crear las opciones según sean necesarias. O supongo que podrías agregarlos a otro objeto oculto y retirarlos cuando los necesites completamente formados.

Así que tendría algo así como

$("option").appendTo($("#myhiddenselect")); 
$(".four").appendTo($("#myvisibleselect"));

Fuente

2011-11-17 15:38:29 kaykayman

¿Ocultar opciones en el elemento seleccionado, no funciona en IE?

Respuesta

Cuestiones relacionadas