Html CSS-在iPhone上的选择菜单中隐藏选项&；游猎

因此，我有一个网站，是使用移动导航选择菜单。我需要从列表中隐藏一些选项，并且能够在除Safari和iPhone之外的所有浏览器和设备上隐藏这些选项

以下是我用来删除列表中第7-11项的css：

select.select-menu option:nth-child(n+7):nth-child(-n+11){
display: none !important;}

这在Chrome和我的android手机上都能正常工作。但是，当您在Safari或iPhone上查看站点时，这些选项不会隐藏，并且仍然会显示出来

我尝试了几种选择，对这件事做了很多研究，但没有找到解决办法。我尝试使用jQuery从列表中删除项目，但也无法使其正常工作

有没有办法隐藏iPhone和Safari上的选项

编辑：

这是一把小提琴：

---

根据您的需要，您有许多选项，从我发现的

display:none

在safari上不起作用，因此这里有一个替代方法：

您只需将其设置为超小且不可见：

opacity: 0;
height: 0;
width: 0;
overflow: hidden;

这应该可以很好地工作，并且应该得到chrome和safari的支持

---

祝你好运

你不能。Safari在下拉列表中使用覆盖。。。你真的必须移除它们。。。。有一个黑客使用跨度作为无效语法。。。虽然不建议使用无效语法，但只有这对我有效-wrap-in元素需要隐藏它。“如果检查”不包装它两次，如果隐藏连接到页面上的某些操作

使用jQuery为iOS隐藏：

if( !($(this).parent().is('span')) ) $(this).wrap('<span>');

if( ($(this).parent().is('span')) ) $(this).unwrap();

---

您可以使用JavaScript解决这个问题

var selectOption = document.querySelectorAll('.select-menu option');

for (var i = 0; i < selectOption.length; i++) {
  var item = selectOption[i];
  if (item.innerHTML.charAt(0) === "–") {
    item.remove();
  };
}

var-selectOption=document.querySelectorAll（'.select-menu-option'）；
对于（变量i=0；i

---

我用一个动态JavaScript解决方案派生了JSFIDLE：

对我有效的解决方案是创建另一个隐藏的select，其中包含所有选项，并将相关选项克隆到可见的select。通过这种方式，您可以显示一个要显示的选项，但仍会在隐藏列表中保留其他选项的记录。

我在Safari中也遇到了一些困难，当时我试图在我的选择（从扩展）中隐藏选项，并决定走这条路线

要“隐藏”我的选择中的选项，我将选项替换为div，然后再次返回到选项，如果我想再次显示它

//如果存在任何div，请更改回选项
函数showAll（）{
var nodesSnapshot=document.evaluate（//select/div），document，null，XPathResult.ORDERED\u NODE\u SNAPSHOT\u TYPE，null）；
对于（变量i=0；i

showAll
可怕的
希德尔
隐藏
隐藏
秀给我看
隐藏
秀给我看

我发现删除项目比隐藏项目更容易

$(this).remove();

---

谢谢你的回答！不幸的是，这也不起作用。这看起来真的很奇怪，因为我可以在Safari中检查元素，看到css规则被明显应用，但仍然不起作用。你可以添加一个屏幕截图吗？或者如果网站在网上，给它一个链接吗？请标记正确答案