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.

当我在选择下拉菜单中使用多个选项时，safari会遇到一些奇怪的问题。当我选择一个选项并说完成时，下拉菜单将返回显示“0项”。但是如果我选择多个选项(不止一个)，除了第一个选项之外的所有选项都被选中。在此之后，如果我取消所有选项，最后一个选择仍然保留。

Check this for a demo using safari on iOS 7.0.3.

在iOS 7.0.3上使用safari来检查这个演示。

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

我查看了http://www.thecssninja.com/html/optgroup-ios6，但它讨论了使用optgroups的问题——(当使用多个optgroups时)现在似乎完全崩溃了。

4 个解决方案

#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...

这在一定程度上是在7.1版本中被修正的，然而，在前几天，仍然有很多问题。项目计数现在是正确的，但是…

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.

您可以选择optgroup标题(您不应该这样做，如果是这样的话，它至少应该选择/取消整个组。
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.:

在苹果的论坛上，其他人也报告了iOS 7.0.3的“多重选择”漏洞。例如:

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

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

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

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.
寻找现有的bug，如果有必要，可以通过苹果的bug报告来提交一个新的bug。
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.)
在苹果的开发者论坛上加入任何关于这个话题的讨论话题，如果还没有讨论，就打开一个新的话题。(上述讨论都是在苹果的公开论坛上进行的，在“使用iPhone”的领域，苹果的开发者支持人员可能并不一定会看到或响应这些讨论。)

#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