Jquery 隐藏&x27；残疾人士'；下拉菜单中的选项

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

谢谢你的帮助

例如：

---

链接：

您可以使用css轻松解决它

select option:disabled {
    display:none;
}

---

这将适用于所有浏览器，但仅适用于IE9及以上版本：

select option:disabled {
    display:none;
}

这将适用于所有主要浏览器，直至IE7：

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

或者，您也可以使用jQuery将几乎所有主要浏览器及其早期版本作为目标。下面的代码将在所有选项上循环，并检测它们的

disabled

属性实际上是否为“disabled”。如果是，它只会把它藏起来

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

---

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

这项工作：

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

---

使用jquery，最近的解决方案是将隐藏属性添加到option元素：

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

MyText

如果OP不担心瞄准IE的旧版本，那么为什么要经历jQuery的所有麻烦呢？他的网站已经在使用jQuery，jQuery在比CSS更多的浏览器中解决了这个问题，Stack Overflow是关于帮助其他用户并获得一个全局数据库，其中包含用户可能遇到的关于编程的所有问题。为什么不为OP和其他遇到这个问题的未来用户提供一个比jQuery更快的更简单、更优雅的解决方案呢？或者更好，两个都给，你说得对。就我个人而言，我会使用这两种方法，我没有想到你发布的css修复，我只是看到你发布的jquery是一个不必要的代码量，当你给它一个选择器时，jquery默认会返回一组包装好的“数组对象”中的元素，所以不需要迭代。每个，通过使用psuedoSelector，我们可以避免在.attr方法的返回值中添加我们自己的条件检查。经过我们的共同努力，问题似乎已经解决了！是的，希望我们解决了他的问题：）不过，我试图用jQuery创建一个跨浏览器的解决方案。使用选择器

选项[disabled=“disabled”]

仅适用于IE7及以上版本。但是，通过使用

.attr（）

方法，它可以在浏览器上工作，一直到IE6（甚至可能是IE5）。这就是为什么我必须使用循环来比较这些值。虽然，OP最初的问题中没有浏览器支持，所以我们的两个答案都是同样可以接受的：）你能给我们看看你的代码吗？你已经试过什么了？是否可以检查下面的@Mohammed answer并将他的修正整合到你的答案中，如果正确的话？