Question

当我在选择下拉菜单中使用多个选项时 - safari遇到了奇怪的问题。当我选择一个选项并说“完成”时，下拉列表会返回显示“0项”。但是如果我选择多个选项（多个选项），除了第一个选项之外的所有选项都会被选中。在此之后，如果我取消选择所有选项，则最后一个选项仍然处于选中状态。

使用iOS 7.0.3上的safari检查this for a demo。

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

我查看了http://www.thecssninja.com/html/optgroup-ios6，但是谈到了使用optgroups的问题 - 当与多个一起使用时，它们似乎完全崩溃了。

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

Answer 2

简单添加：

<option disabled></option>

作为多重选择的第一个元素。

Answer 3

这已经在7.1中得到了部分修复，但是，仍有很多问题。项目现在是正确的，但是......

您可以选择选项组标题（您不应该这样做，如果是这样，它至少应该选择/取消选择整个组。
如果您停用选项<option disabled="disabled">Computer 1</option>，您仍然可以选择它当然也是完全错误的。

将它与Apple结合在一起。

Answer 4

另外，其他人也在Apple的论坛上报道了iPhone上iOS 7.0.3中Safari的“多选”错误。 e.g：

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

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

由于苹果公司需要解决这个问题，因此根据这两个讨论主题的帖子，您可以做的有助于促进解决此问题的共识方法是：

查找现有错误，并在必要时通过Apple的Bug Reporter提交新错误。
在Apple的开发者论坛中加入有关此主题的任何现有讨论主题，如果尚未讨论，请打开一个新主题。（上述讨论均发生在Apple的公共论坛，“使用iPhone”区域，因此Apple开发人员支持人员不一定会看到或回应。）

Answer 5

我似乎想出了一个与jQuery神秘配合的修复程序。我想如果不想使用jQuery依赖项，可以对代码进行普通化：

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

在Safari iOS 7中进行多项选择

5 个答案: