I have a hierarchal dropdown menu that visually differentiates hierarchy by using space characters
Example
<select>
<option value='1'>Top Level Item</option>
<option value='2'> Lower Level Item</option>
<option value='3'> Another Lower Level Item</option>
<option value='4'>Another Top Level Item</option>
</select>
This works well in all browsers except for the iPhone where the spaces are ignored and all items are shown at the same level.
I’m using a reactive design (same DOM for mobile and desktop) and have decided that integrating jQuery Mobile just for the themed select isn’t a good option.
Are there any easy work arounds or small plugins that might help me accomplish this for IOS browsers?
<optgroup> elements are not a good fit b/c some of the parent options can be selected. <optgroup> do not allow for selecting the parent categories as best as I can tell
The core of the requirement for this feature is that all of a particular site’s navigation must be on one dropdown like element that is touch friendly.
You might try to start your hierarchy-divider with the Zero Width Joiner / Zero Width Non-Joiner Entity using:
‍or‌