Multiple select in Safari iOS 7

问题:

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 if I select multiple options (more than one), everything except the first one gets selected. After this, if I unselect all options, the last one remains selected.

Check this for a demo using safari on iOS 7.0.3.

<select multiple="multiple">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>

I've looked at http://www.thecssninja.com/html/optgroup-ios6, but that talks about issues with using optgroups - which(when used with multiple) currently seems to crash safari altogether.

回答1:

    // 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);
        });
    }

回答2:

Simple add:

<option disabled></option>

as the first element of multiple select.

回答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.

回答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.)

回答5:

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>');
    });
}