5

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

user3658635
  • 51
  • 1
  • 1
  • 2

4 Answers4

10

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();
   }
});
Fizzix
  • 23,679
  • 38
  • 110
  • 176
  • Is it possible to check @Mohammed answer below and integrate his fix to your answer, if it is correct? – Athafoud Feb 08 '16 at 10:36
5

you can easly solve it using css

select option:disabled {
    display:none;
}
LGVentura
  • 1,547
  • 1
  • 11
  • 17
2

I just checked out your site and copied a bit of html to test

this works: 

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

using jquery

undefined
  • 2,154
  • 15
  • 16
  • Why go through all the trouble of jQuery when you could simply just use CSS if the OP is not worried about targeting old versions of IE? – Fizzix May 20 '14 at 23:16
  • Well, his site is already using jquery, jquery solves this problem in more browsers then css, and he flaged the question under jquery. – undefined May 20 '14 at 23:26
  • Stack Overflow is all about helping other users and getting a global database of all questions that users may have about programming. Why not offer the OP, and other future users that come across this question, a more simple and elegant solution that is faster than jQuery? Or even better, offer them both. – Fizzix May 21 '14 at 00:30
  • You have a point. Personally I would use both, I didn't think of the css fix you had posted, I merely saw that the jquery you had posted was an unnecessary amount of code, Jquery by default returns a wrapped set of elements in an 'array object' when you give it a selector, so no need to iterate over with .each, and with the use of psuedoselectors we can eliminate the need to add our own conditional checking agains the returned value of the .attr method. With our combined efforts it looks like the problem was solved! – undefined May 21 '14 at 01:28
  • Yeah hopefully we solved his problem :) Although, I was attempting to create a cross browser solution with jQuery. Using the selector `option[disabled="disabled"]` is only available to IE7 and above. But by using the `.attr()` method instead, it can work on browsers all the way back to IE6 (maybe even IE5). That is why I had to use a loop to compare the values. Although, browser support was not in the OP's original question, so both our answers are equally acceptable :) – Fizzix May 21 '14 at 02:05
1

A more recent solution would be to add the hidden attribute to the option element:

<option value="MyValue" hidden>MyText</option>
Pascal R.
  • 2,024
  • 1
  • 21
  • 35