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

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;
}

Answer 3

我刚刚检查了你的网站并复制了一些html进行测试

这工作：

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

使用jquery

Answer 4

更新的解决方案是将hidden属性添加到option元素：

<option value="MyValue" hidden>MyText</option>