IOS Safari <select> 元素

Question

我有一个层次下拉菜单，通过使用空格字符在视觉上区分层次结构

示例

<select>
    <option value='1'>Top Level Item</option>
    <option value='2'>&nbsp;&nbsp;&nbsp;Lower Level Item</option>
    <option value='3'>&nbsp;&nbsp;&nbsp;Another Lower Level Item</option>
    <option value='4'>Another Top Level Item</option>
</select>

这适用于所有浏览器，但 iPhone 除外，其中空格被忽略并且所有项目都显示在同一级别。

我正在使用响应式设计（移动设备和桌面设备使用相同的 DOM），并决定仅针对主题选择集成 jQuery Mobile 不是一个好的选择。

是否有任何简单的解决方法或小插件可以帮助我为 IOS 浏览器完成此任务？

<optgroup> 元素不适合 b/c 可以选择一些父选项。 <optgroup> 不允许尽可能选择父类别

此功能的核心要求是特定网站的所有导航都必须位于一个类似下拉菜单的元素上，该元素对触摸友好。

Answer 1

您可以尝试使用零宽度连接器/零宽度非连接器实体来启动层次结构分隔器：‍ 或 ‌

Answer 2

唯一的选择是使用 HTML/CSS 替换 <SELECT>。

见：jQuery select box replacement

Answer 3

这似乎可以很好地满足我的需求，但它并不完全完美——在桌面上，顶部有一条无法选择的线。

<select>
    <optgroup>
        <option value='1'>Top Level Item</option>
        <option value='2'>&zwj;&nbsp;&zwj;&nbsp;&zwj;&nbsp;Lower Level Item</option>
        <option value='3'>&zwj;&nbsp;&zwj;&nbsp;&zwj;&nbsp;Another Lower Level Item</option>
        <option value='4'>Another Top Level Item</option>
    </optgroup>
</select>