在下拉菜单中隐藏"已禁用"选项

Question

我正在使用由WooThemes/WooCommerce开发的名为Composite Products的插件.这个插件允许您创建复杂的产品,即如果您想购买双床垫,那么您应该只能选择双箱弹簧和双框架.这个插件的问题在于它还显示了所有其他可用选项,但它们被禁用(灰色).目标是完全隐藏它们.

谢谢您的帮助.

示例:http://cl.ly/image/1J2P2Y2s2g0V

链接:http://bit.ly/1paEoMM

Answer 1

这适用于所有浏览器,但仅适用于IE9及更高版本:

select option:disabled {
    display:none;
}

这将适用于所有主流浏览器,一直到IE7:

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

或者,您可以使用jQuery来定位几乎所有主流浏览器及其早期版本.以下代码将遍历所有选项并检测其disabled属性是否实际上是"禁用".如果是,它只是隐藏它.

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

Answer 2

您可以使用 css 轻松解决它

select option:disabled {
    display:none;
}