Ocultar opciones ‘deshabilitadas’ en el menú desplegable

3 minutos de lectura

Estoy usando un complemento llamado Productos compuestos desarrollado por WooThemes / WooCommerce. Este complemento le permite crear productos complejos, es decir, si desea comprar un colchón doble, solo debería poder elegir un somier doble y un marco doble. El problema con este complemento es que también muestra todas las demás opciones disponibles, pero están deshabilitadas (grises). El objetivo es ocultarlos por completo.

Gracias por tu ayuda.

Ejemplo: http://cl.ly/image/1J2P2Y2s2g0V

Enlace: http://bit.ly/1paEoMM

  • ¿Podrías mostrarnos tu código? ¿Qué has probado ya?

    – Zoe

    20 mayo 2014 a las 23:29

avatar de usuario
Fizzix

Esto funcionará en todos los navegadores, aunque solo funcionará en IE9 y superior:

select option:disabled {
    display:none;
}

Esto funcionará en todos los principales navegadores hasta IE7:

select option[disabled="disabled"]
{ 
    display:none;
}

O, alternativamente, puede usar jQuery para dirigirse a casi todos los principales navegadores junto con sus versiones anteriores. El siguiente código recorrerá todas las opciones y detectará si su disabled el atributo está de hecho ‘deshabilitado’. Si es así, simplemente lo ocultará.

$('select option').each(function() {
   var thisAttr = $(this).attr('disabled');
   if(thisAttr = "disabled") {
      $(this).hide();
   }
});

  • ¿Es posible verificar la respuesta de @Mohammed a continuación e integrar su solución a su respuesta, si es correcta?

    – Athafoud

    8 de febrero de 2016 a las 10:36

puedes resolverlo fácilmente usando css

select option:disabled {
    display:none;
}

Acabo de revisar su sitio y copié un poco de html para probar

esto funciona:

$(function() { 
      // check for options with disabled attribute 
      $('option[disabled="disabled"]').hide(); //then hide them                
});

usando jquery

  • ¿Por qué pasar por todos los problemas de jQuery cuando simplemente podría usar CSS si el OP no está preocupado por apuntar a versiones antiguas de IE?

    – Fizzix

    20 mayo 2014 a las 23:16

  • Bueno, su sitio ya usa jquery, jquery resuelve este problema en más navegadores que css, y marcó la pregunta en jquery.

    – indefinido

    20 mayo 2014 a las 23:26

  • Stack Overflow se trata de ayudar a otros usuarios y obtener una base de datos global de todas las preguntas que los usuarios puedan tener sobre la programación. ¿Por qué no ofrecer al OP y a otros futuros usuarios que se encuentren con esta pregunta una solución más simple y elegante que sea más rápida que jQuery? O mejor aún, ofréceles ambos.

    – Fizzix

    21 de mayo de 2014 a las 0:30

  • Tiene un punto. Personalmente, usaría ambos, no pensé en la corrección de css que había publicado, simplemente vi que el jquery que había publicado era una cantidad innecesaria de código, Jquery por defecto devuelve un conjunto de elementos envueltos en un ‘objeto de matriz’ cuando le da un selector, por lo que no es necesario iterar con .each, y con el uso de pseudoselectores podemos eliminar la necesidad de agregar nuestra propia verificación condicional contra el valor devuelto del método .attr. ¡Con nuestros esfuerzos combinados, parece que el problema se resolvió!

    – indefinido

    21 de mayo de 2014 a las 1:28

  • Sí, con suerte resolvimos su problema 🙂 Aunque estaba intentando crear una solución de navegador cruzado con jQuery. Usando el selector option[disabled="disabled"] solo está disponible para IE7 y superior. Pero al usar el .attr() en cambio, puede funcionar en navegadores hasta IE6 (tal vez incluso IE5). Es por eso que tuve que usar un bucle para comparar los valores. Aunque, la compatibilidad con el navegador no estaba en la pregunta original del OP, por lo que nuestras dos respuestas son igualmente aceptables 🙂

    – Fizzix

    21 de mayo de 2014 a las 2:05


Una solución más reciente sería agregar el atributo oculto al elemento de opción:

<option value="MyValue" hidden>MyText</option>

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad