Disabled <option> still selectable on iOS

Question

I'm using a select as a navigation menu for mobile devices.

Because optgroup renders pretty badly on iOS, I've been using disabled options and hyphens to group some submenus.

ie:

<select>
    <option value="" disabled>Menu</option>
    <option value="sub1">- Sub 1</option>
    <option value="sub2">- Sub 2</option>
</select>

The disabled option is not selectable on desktop browsers, as expected. But on iOS, you can actually select it, even if it's greyed out. That then triggers my AJAX code to dynamically change page content and just creates a big mess.

I could "brute-force" cancel this by adding some if check statements in my AJAX function but I'm really wondering why disabled elements are selectable in the first place on iOS Safari?

My site is here (you will have to resize to width < 700px on desktop, but need an iOS to select disabled elements)

Answer 1

In addition to disabling the option, I got it to work by adding display: none; to the style attribute in the tag.

<option value="12000">$12,000</option>
<option value="15000">$15,000</option>
<option disabled="" style="display: none;" value="20000">$20,000</option>
<option disabled="" style="display: none;" value="25000">$25,000</option>

I'm not saying this is optimal, but it makes options not able to be selected for iOS Safari.