我有一个网站，移动导航使用了下拉菜单。我需要从列表中隐藏一些选项，并且已经在所有浏览器和设备上都能够实现，除了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上隐藏这些选项？
编辑：
这里是一个fiddle： https://jsfiddle.net/cv6rubua/3/
只有这种方法适用于我 - 将需要隐藏的元素包裹在<div>元素中。如果需要在页面上执行某些操作来隐藏它，请使用“if-check”检查是否已经包含在内。
使用jQuery在iOS上进行隐藏：
if( !($(this).parent().is('span')) ) $(this).wrap('<span>');
使用jQuery在iOS上取消隐藏：
if( ($(this).parent().is('span')) ) $(this).unwrap();
使用Jquery，您可以将 prop("disabled", true) 与 hide() 结合使用。就像这样：
$(this).prop("disabled", true); // for safari
$(this).hide();
这种方式将在大多数浏览器中隐藏选项。在Safari中，它们将可见但被禁用。
我认为这是一个不错的替代方案。
我也曾在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>$(this).remove();
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();
};
}
不行。Safari使用覆盖层来显示下拉菜单... 你必须将它们删除... 有一种使用非有效语法的span标签的黑客方法... 不过不建议使用无效语法。
根据您的需求，有多种选择可供您使用。我发现display: none在Safari上不起作用，因此这里提供一种替代方法：
您可以将其设置为非常小且不可见：
opacity: 0;
height: 0;
width: 0;
overflow: hidden;
这应该很好用，而且应该被Chrome和Safari支持！
祝你好运！