Question

HTML：

    <select id="resource-list" onchange="js_resource_filter_changed()" name="resource-list">
    <option value="site">This is option 1</option>
    <option value="154" selected="selected">This is option 2</option>
    </select>

CSS：

    #resource-list option[value="site"] {display: none !important;}

我的目标是仅使用CSS隐藏选项1。这适用于IE9及以上+ Chrome和FF，但不适用于IE8和Safari。我想知道代码是否可以调整，或者是否无法在所有浏览器中隐藏特定的选择选项。

您可以在此处测试：http://jsfiddle.net/cX9gC/

Answer 1

答案是，因为IE不支持在select（组合框，下拉控件）中隐藏选项标签，所以将每个选项包装在span标签中，有点像将类应用于此范围标记以隐藏它或其他东西。我做到了，它对我有用;这是我接受它的线程Hide options in a select list using jQuery

Answer 2

您可以使用first-child隐藏第一个<option>标记。这样的事情应该有效：

#resource-list option:first-child {
  display: none;
}

这里有效：http://jsfiddle.net/7Vs9Y/

由于first-child是CSS 2.1的一部分，IE8确实支持它。

<强>更新

由于我忘记IE8不允许display:none;处理<option>标记，因此我将在此处提供JQuery解决方案。我将原来的答案保留下来，因为其他人可能会发现它对他们的情况有用。

使用JQuery，我们可以执行.remove()之类的操作来完全删除第一个<option>标记。这实际上优于first-child技术，因为它完全从DOM中删除标记，而不是仅隐藏它并允许使用开发人员工具的人修改应用的CSS。结帐http://api.jquery.com/remove/了解有关如何使用它的更多信息。

Answer 3

为第一个孩子尝试这些

width: 0; height: 0;

或

visibility: hidden;

或

opacity: 0;

或

position: absolute; top: -9999px; left: -9999px;

使用IE8和Safari时隐藏CSS样式不兼容的选择选项

3 个答案: