隐藏下拉选择框中的第一个选项

Question

我在一个下拉列表中有动态生成的选项。我想隐藏第一个选项，因为它不需要显示。是否有跨浏览器兼容的方法来实现这一点。使用jQuery或CSS都可以，任何解决方案都可以。

Ahmar

- Ahmar Ali

---

你有任何代码吗？请清晰解释您想要实现的内容。 - dawez

你所说的第一个选项具体是什么意思？请添加一段代码片段。 - Sai

:first-child 伪类可能是指选择器中的第一个子元素。 - Sai

不确定你的问题是什么，但也许这是你要找的：https://dev59.com/5m025IYBdhLWcg3wyI-V#8442831 - A. Wolff

抱歉如果我的问题不太清楚。我有一个下拉菜单，但无法进行控制，我希望隐藏其中的第一个选项。谢谢。 - Ahmar Ali

Answer 1

$("#my-drop-down-select-element-id").find("option").eq(0).remove();

使用上述代码可以删除 <select /> 元素中的第一个 <option /> 元素。

使用 CSS 隐藏 <option /> 元素会有问题。更多信息请参见下面的链接。

上述函数链的分解：

1. 选择 <select /> 元素。（不是双关语）
2. 在之前选择的元素中查找 <option /> 元素。我使用 find() 因为如果存在选项组，则 children() 将无法工作。
3. 筛选只保留第一个 <option /> 元素。
4. 从 DOM 中删除该元素。

这种问题以前肯定已经被问过了，欲了解更多信息，请参阅以下链接：How to hide a <option> in a <select> menu with CSS?

- Jasper

Answer 2

$('select > option:first').hide();

使用此方法可以隐藏所有的首选项选择选项。

- Gael

---

这通常可以工作，但如果存在<optgroup />元素，则<option />元素将不是<select />元素的直接后代。 - Jasper

谢谢。它正常工作。 - Abijith Ajayan

Answer 3

HTML

<select id='test'>
    <option value='1'> op 1 </option>
    <option value='2'> op 2 </option>
    <option value='3'> op 3 </option>
    <option value='4'> op 4 </option>
</select>

Jquery

$(document).ready(function() {
    $("#test").find("option").eq(0).remove();
});

就是这样了！

- Zanoldor

---

抱歉，在我回答和测试代码后，当我提交答案时，所有其他答案都出现了。非常抱歉。 - Zanoldor

Answer 4

你可以使用CSS，因为它可以与下拉选择框同步加载，具体如下：

#select-item:first-child {
    display: none;
}

- Hive7

---

您提供的选择器我认为写错了。而且这个想法似乎在IE 11中也不起作用。 - Jasper