需要隐藏具有禁用属性的选项

Question

我知道这是一个远景，但我需要能够隐藏基于以下代码禁用的选项，例如选项2的属性已禁用，我不希望显示此选项 -

<select id="pa_machine-model" name="attribute_pa_machine-model">
        <option value="">Choose an option…</option>
        <option value="bestech-40" disabled="disabled">Bestech 40</option><option value="52">52</option>
</select>

我已经在Firefox中使用CSS进行了管理，但是在chrome中它们仍然会出现但是显示为灰色，每个变量都有很多选项，所以如果它们只显示依赖于上面的选择框会更好。有没有办法处理JavaScript / jQuery？

谢谢！

Answer 1

使用CSS：

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

<强> jsFiddle example

Answer 2

我不认为你可以单独使用CSS进行跨浏览器。我过去也遇到过同样的问题。

解决此问题的一种方法是将禁用的option包装在一个范围内（使用JQuery）并隐藏：

$('option[disabled=disabled]').wrap('<span class="disabled" />');

---

.disabled {
    display: none;
}

Demo

---

编辑：

根据下面的评论，既然你可能不想开始黑客wordpress插件试试这个：

每次更改select时;运行脚本：

$('select').on('change',function() {
    $('option[disabled=disabled]').wrap('<span class="disabled" />');
});

Answer 3

有趣......我只是尝试使用jQuery .hide（）方法并且它也没有做任何事情，即使它确实显示内联样式存在：

您可以完全删除节点：$('option:disabled').remove();

Answer 4

 <select id="pa_machine-model" name="attribute_pa_machine-model">
            <option value="">Choose an option</option>
            <option value="bestech-40" class="hide">Bestech 40</option>
        <option value="52">52</option>
    </select>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script >

    $( ".hide" ).hide();
    </script>