IOS Safari to select multiple options visually for one choice

Question

I use this "empty optgroup " workaround so that iOS displays option elements with long text in a readable way. To test this solution, I use the following code:

 <p>Choose something:</p> <select> <option>Option A</option> <option>Some other option which is much longer than the first two options that has a distinguising feature at the end: B!</option> <option>Some other option which is much longer than the first two options that has a distinguising feature at the end: C!</option> <option>Option D</option> <option>Option E</option> <option>Option F</option> <option>Option G</option> <optgroup label=""></optgroup> </select> 

 optgroup { display: none; } 

This makes iOS Safari display long options, so they are distinguishable again, but this opens up another problem when multiple items appear as though this is a single drop down menu.

Playback:

• Open this jsFiddle fullscreen result on a fully updated iPhone 4S;
• Press select to open it.

Note that option "A" is now selected.

3. Scroll down in the native drop down menu until “Option A” is no longer visible.
4. Press to select "Option E".
5. Scroll back a bit.

The end result is that two options are selected:

The expected result, obviously, is that only "E" is selected.

How can I solve this problem?

Answer 1

I found this problem without the optgroup element when I was programmatically re-populated and selected the default element in the combo box in response to another field change. I found that I just had to clear the old selection first:

 $("#time")[0].selectedIndex = -1 // this fixed it for me $("#time option").each(function () { if ($(this).val() == oldtime) { $(this).attr("selected", "selected"); return; } }); 

Only Safari had this problem, it is clearly an error that in the list with one choice you can select two elements, apparently selected.