所以我有一个使用选择菜单进行移动导航的网站。我需要从列表中隐藏一些选项，并且已经能够在除 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 上的选项？
编辑：
这是一个小提琴： https://jsfiddle.net/cv6rubua/3/
【问题讨论】：
只有这对我有用 - 包裹在你需要隐藏它的元素中。如果隐藏与页面上的某些操作相关，则“if-check”不会将其包装两次。
使用 jQuery 隐藏 iOS：
if( !($(this).parent().is('span')) ) $(this).wrap('<span>');
使用 jQuery 为 iOS 取消隐藏：
if( ($(this).parent().is('span')) ) $(this).unwrap();
【讨论】：
我在 Safari 中也遇到了困难，试图在我的选择中隐藏选项（来自扩展）并决定走这条路。
要“隐藏”我的选择中的选项，我将 option 替换为 div，然后如果我想再次返回 option再显示一遍。
//if any div exists change back to option
function showAll(){
var nodesSnapshot = document.evaluate("//select/div", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
var nodeA = nodesSnapshot.snapshotItem(i);
var elemA = document.createElement('option');
elemA.innerHTML = nodeA.innerHTML;
nodeA.parentNode.replaceChild(elemA, nodeA);
}
}
//replace all option that contain text with div
function hideSome(){
var nodesSnapshot = document.evaluate("//select/option[text()[contains(.,'HideMe')]]", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
var nodeA = nodesSnapshot.snapshotItem(i);
var elemA = document.createElement('div');
elemA.innerHTML = nodeA.innerHTML;
nodeA.parentNode.replaceChild(elemA, nodeA);
}
}
//replace all option with div
function hideAll(){
var nodesSnapshot = document.evaluate("//select/option", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
var nodeA = nodesSnapshot.snapshotItem(i);
var elemA = document.createElement('div');
elemA.innerHTML = nodeA.innerHTML;
nodeA.parentNode.replaceChild(elemA, nodeA);
}
}<button onclick="showAll();">showAll</button>
<button onclick="hideSome();">hideSome</button>
<button onclick="hideAll();">hideAll</button>
<select>
<option>HideMe</option>
<option>HideMe</option>
<option>ShowMe</option>
<option>HideMe</option>
<option>ShowMe</option>
</select>【讨论】：
使用 Jquery，您可以将 prop("disabled", true) 与 hide() 一起使用。像这样：
$(this).prop("disabled", true); // for safari
$(this).hide();
这种方式选项将在大多数浏览器中隐藏。在 Safari 中，它们将可见但被禁用。
我认为这是一个不错的选择。
【讨论】：
你不能。 Safari 为下拉菜单使用了覆盖层...您实际上必须删除它们......有一个 hack 使用跨度作为无效语法...虽然不建议使用无效语法
【讨论】：
你可以使用 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();
};
}
我已经用动态 JavaScript 解决方案分叉了 jsfiddle：https://jsfiddle.net/davidgumzchoi/05ocw2x0/
【讨论】：
对我有用的解决方案是创建另一个隐藏选择，其中包含所有选项，并将相关选项克隆到可见选择。这样，您可以显示一个您想要显示的选项，但仍将其他选项的记录保存在隐藏列表中。
【讨论】：
我发现删除项目比隐藏它们更容易。
$(this).remove();
【讨论】：
你有很多选择取决于你想要什么，我发现display: none 在 safari 上不起作用，所以这里有一个替代方法：
您可以简单地将其设置为超级小且不可见：
opacity: 0;
height: 0;
width: 0;
overflow: hidden;
这应该很好用，并且应该得到 chrome 和 safari 的支持！
祝你好运！
【讨论】：