Jquery 通过CSS或脚本从iOS选择列表隐藏特定选项元素

我有一个web应用程序，其中选择列表是通过javascript动态生成的。选择是从DOM中预先存在的菜单列表中进行的

我刚刚发现iOS忽略了针对选择列表的CSS。例如，我有一个最大宽度为768的媒体查询，用于在屏幕大小为768px或更低时隐藏选择列表中的特定项

尽管使用设备仿真工具（即quirktools/screenfly）时，这似乎能按预期工作，但在实际的iOS设备上显示选择列表时，“显示：无”规则将被完全忽略

---

是否有建议的解决方法？

我决定在这里使用的解决方案是在jQuery中引入一个条件，以防止将其写入选项列表

由于select仅在<768px设备上显示，因此无需涉及媒体查询或window.width

因此，菜单项永远不会写入选择列表，iOS select CSS覆盖也不会造成问题

$("nav.main li a").each(function () {

    var el = $(this);
    var elt = el.text();

    // Removing the extra » symbol
    elt = elt.replace("»", "");
    if (elt != 'Hide This Menu Item') {
        //Continue building select option list
    }
}

---

我决定在这里使用的解决方案是在jQuery中引入一个条件，以防止它写入选项列表

由于select仅在<768px设备上显示，因此无需涉及媒体查询或window.width

因此，菜单项永远不会写入选择列表，iOS select CSS覆盖也不会造成问题

$("nav.main li a").each(function () {

    var el = $(this);
    var elt = el.text();

    // Removing the extra » symbol
    elt = elt.replace("»", "");
    if (elt != 'Hide This Menu Item') {
        //Continue building select option list
    }
}

---

您可以创建多个

选择
元素，并在媒体查询中切换整个内容的可见性。jQuery条件是否可以封装在媒体查询的等效项中？例如，如果（screen.max-width）可以，您可以计算
$（window.width（））
或类似的内容，但为了进行此评估，您将遇到性能问题，因为它需要绑定到窗口大小调整事件。当然，您可以限制此操作，但我个人更愿意尝试重复标记，并消除使用事件处理程序的任何需要。不过，这取决于问题的上下文。我做过不知道selects btw、nice catch、+1就是这种情况。您可以创建多个
select
元素，并在媒体查询中切换整个内容的可见性。jQuery条件是否可以包装在媒体查询的等效项中？即，如果（screen.max-width）可以，则可以计算
$（window.width（）
或类似的内容，但为了进行此评估，您将遇到性能问题，因为它需要绑定到窗口大小调整事件。当然，您可以限制此操作，但我个人更愿意尝试重复标记，并消除使用事件处理程序的任何需要。不过，这取决于问题的上下文。我做过我不知道，顺便说一句，钓得不错，+1。