jQuery - 根据值隐藏选项元素

Question

试图隐藏列表中的一个选项元素。我尝试了几种方法，但好像都不起作用。 由于不能添加ID或类，因此需要通过名称调用选择。

$('select[name*="boxes"] option[value="box6"]').hide();

这里是示例代码：

http://jsfiddle.net/q2nb08t6/

有什么建议吗？

- SNos

---

hide()会向您的元素添加样式display:none;。但是这种样式对选项没有影响。https://dev59.com/1GIk5IYBdhLWcg3wbtyb - β.εηοιτ.βε

啊——不同的浏览器有所不同。在 Chrome 和 Firefox 中可以正常工作，但在 Safari 或 IE 中不能。 - Ted

@Ted，是的，我可以确认在我的 Safari v8.0.6 中根本不起作用。 - β.εηοιτ.βε

有没有办法让代码在所有浏览器中都能正常工作？ - SNos

不过如果你只是想隐藏元素，那么移除并不是唯一的选择。正如@Ted在他的回答中所指出的那样，移除元素会强制你在需要重新显示它时重新创建DOM元素。 - β.εηοιτ.βε

Answer 1

如果您可以删除它，这似乎在所有浏览器中都有效：

$('select[name*="boxes"] option[value="box6"]').remove();

在FF、Chrome、Safari、IE和Opera中进行了测试。

演示 Fiddle

- Ted

Answer 2

将您的选择器更改为

$('select[name*="boxes"] > option[value="box6"]').hide();

> 表示在前面的选择器中查找后面的选择器。

这是您更新的 fiddle：http://jsfiddle.net/q2nb08t6/2/

此外，如果这只是一次性的情况，您甚至可以将选择器简化为：

$('option[value="box6"]').hide();

- Vince

---

这是一个浏览器兼容性问题--请查看@b.enoit.be在评论中发布的链接：https://dev59.com/1GIk5IYBdhLWcg3wbtyb - Vince