Multiple select in Safari iOS 7

Question

When I use the multiple option in a select dropdown - safari runs into weird issues. When I select an option and say Done, the dropdown goes back to showing \'0 items\'. But

Answer 1

I seem to have come up with a fix with mysteriously works with jQuery. I imagine you could vanilla-ify the code if you don't want the jQuery dependency:

/**
 * iOS mutliple select fix.
 */
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $('select[multiple]').each(function() {
        $(this).prepend('<option disabled></option>');
        $(this).append('<optgroup disabled></optgroup>');
    });
}

Answer 2

Simple add:

<option disabled></option>

as the first element of multiple select.

Answer 3

This has partly been fixed in 7.1 that was released the other day, however, there are still many issues. Item count is now correct, but...

• you can select optgroup titles (you should not be able to do this, and if so, it should at least select/unselect the entire group.

• if you disable an option <option disabled="disabled">Computer 1</option> you can still select it which of course it totally wrong as well.

Get it together Apple.

Answer 4

'Multiple select' bugs in Safari in iOS 7.0.3 on the iPhone have been reported by others, as well, on Apple's discussion forums; e.g.:

https://discussions.apple.com/message/23745665#23745665

https://discussions.apple.com/message/23607781#23607781

Since it's Apple that will need to fix this, the consensus approach for what you can do to help facilitate resolution of this issue, per posts on those two discussion threads, is to:

• Look for existing bugs and, if necessary, file a new bug, via Apple's Bug Reporter.
• Join any existing discussion topic(s) about this in Apple's Developer Forums, and open a new topic if this has not yet been discussed. (The discussions above both took place in Apple's public forums, in the "Using iPhone" area, and as such might not necessarily be seen or responded to by Apple's Developer Support staff.)

Answer 5

    // hack for iPhone 7.0.3 multiselects bug
    if(navigator.userAgent.match(/iPhone/i)) {
        $('select[multiple]').each(function(){
            var select = $(this).on({
                "focusout": function(){
                    var values = select.val() || [];
                    setTimeout(function(){
                        select.val(values.length ? values : ['']).change();
                    }, 1000);
                }
            });
            var firstOption = '<option value="" disabled="disabled"';
            firstOption += (select.val() || []).length > 0 ? '' : ' selected="selected"';
            firstOption += '>&laquo; Select ' + (select.attr('title') || 'Options') + ' &raquo;';
            firstOption += '</option>';
            select.prepend(firstOption);
        });
    }