我正在使用由 WooThemes / WooCommerce 开发的名为 Composite Products 的插件。这个插件允许您创建复杂的产品,即如果您想购买双人床垫,那么您应该只能选择双人弹簧和双人框架。这个插件的问题是它还显示了所有其他可用选项,但它们被禁用(灰色)。目标是完全隐藏它们。
谢谢您的帮助。
我正在使用由 WooThemes / WooCommerce 开发的名为 Composite Products 的插件。这个插件允许您创建复杂的产品,即如果您想购买双人床垫,那么您应该只能选择双人弹簧和双人框架。这个插件的问题是它还显示了所有其他可用选项,但它们被禁用(灰色)。目标是完全隐藏它们。
谢谢您的帮助。
这适用于所有浏览器,但仅适用于 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();
}
});
您可以使用 css 轻松解决它
select option:disabled {
display:none;
}
我刚刚查看了您的网站并复制了一些 html 进行测试
这有效:
$(function() {
// check for options with disabled attribute
$('option[disabled="disabled"]').hide(); //then hide them
});
使用 jQuery
最近的解决方案是将 hidden 属性添加到选项元素:
<option value="MyValue" hidden>MyText</option>