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

Posted 2023-05-09

【中文标题】在下拉菜单中隐藏“禁用”选项

【英文标题】：Hide 'disabled' options in dropdown menu

【发布时间】：2014-07-09 09:34:47

【问题描述】：

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

感谢您的帮助。

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

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

【问题讨论】：

你能告诉我们你的代码吗？你已经尝试过什么？

【参考方案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();
   
);

【讨论】：

是否可以检查下面的@Mohammed 答案并将他的修复整合到您的答案中（如果正确）？

【参考方案2】：

你可以使用 css 轻松解决它

select option:disabled 
    display:none;

【参考方案3】：

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

这行得通：

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

使用 jquery

【讨论】：

如果 OP 不担心针对旧版本的 IE，您可以简单地使用 CSS，为什么还要经历 jQuery 的所有麻烦？

嗯，他的网站已经在使用jquery了，jquery在更多的浏览器中解决了这个问题然后是css，他在jquery下标记了这个问题。

Stack Overflow 旨在帮助其他用户并获取用户可能对编程提出的所有问题的全球数据库。为什么不为 OP 和其他遇到此问题的未来用户提供比 jQuery 更快的更简单和优雅的解决方案？或者更好的是，两者都提供。

你说得有道理。就个人而言，我会同时使用两者，我没有想到您发布的 css 修复程序，我只是看到您发布的 jquery 是不必要的代码量，Jquery 默认情况下会在“数组对象”中返回一组包装的元素当你给它一个选择器时，不需要用 .each 进行迭代，并且使用 psuedoselectors 我们可以消除对 .attr 方法的返回值添加我们自己的条件检查的需要。经过我们的共同努力，问题似乎已经解决了！

是的，希望我们解决了他的问题 :) 虽然，我试图用 jQuery 创建一个跨浏览器的解决方案。使用选择器option[disabled="disabled"] 仅适用于 IE7 及更高版本。但是通过使用.attr() 方法，它可以在浏览器上一直运行到IE6（甚至是IE5）。这就是为什么我不得不使用循环来比较这些值。虽然，浏览器支持不在 OP 的原始问题中，所以我们的答案同样可以接受:)

【参考方案4】：

最近的解决方案是将隐藏属性添加到选项元素：

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