Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide 'disabled' options in dropdown menu

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

like image 702
user3658635 Avatar asked May 20 '14 23:05

user3658635


People also ask

How do I hide selected options in HTML?

The hidden attribute hides the <option> element. You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid. A hidden <option> element is not visible, but it maintains its position on the page.

How do you hide a drop-down list in CSS?

Answer: Use the CSS :hover pseudo-class If you simply want to show and hide dropdown menu on mouse hover you don't need any JavaScript. You can do this simply using the CSS display property and :hover pseudo-class.


2 Answers

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();
   }
});
like image 97
Fizzix Avatar answered Oct 10 '22 22:10

Fizzix


you can easly solve it using css

select option:disabled {
    display:none;
}
like image 45
LGVentura Avatar answered Oct 10 '22 22:10

LGVentura