Hide 'disabled' options in dropdown menu

Question

I'm using a plugin named Composite Products developed by WooThemes / WooCommerce. This plugin allows you to create complex products i.e. if you wanted to buy a twin mattress then you should only be able to choose a twin box spring and twin frame. The problem with this plugin is that it is also showing all of the other available options, but they are disabled (grey). The goal is the hide them entirely.

Thank you for your help.

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

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

Answer 1

This will work on all browers, although will only work on IE9 and above:

select option:disabled {
    display:none;
}

This will work on all major browsers all the way back to IE7:

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

Or alternatively, you could use jQuery to target almost all major browsers along with their earlier versions. The following code will loop over all the options and detect if their disabled attribute is in fact 'disabled'. If it is, it will simply just hide it.

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