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
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.
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.
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();
}
});
you can easly solve it using css
select option:disabled {
display:none;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With