Html Safari iOS 7中的多选功能

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

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

选择1
选择2
选择3

---

我已经看过了，但这涉及到使用optgroups的问题，optgroups（与多个optgroups一起使用时）目前似乎会使safari完全崩溃。

其他人也在苹果的论坛上报道了iPhone iOS 7.0.3中safari的“多个选择”错误；e、 g:

由于苹果需要解决这一问题，根据这两条讨论线索上的帖子，对于如何帮助解决这一问题，达成共识的方法是：

• 查找现有的bug，如有必要，通过苹果的bug Reporter提交一个新bug
• 在苹果的开发者论坛上加入任何关于这一点的现有讨论主题，如果还没有讨论过，就打开一个新主题。（上述讨论都发生在苹果的公共论坛上，在“使用iPhone”区域，因此苹果的开发人员支持人员可能不一定会看到或回应。）

//针对iPhone 7.0.3的多选择漏洞的黑客攻击
if（navigator.userAgent.match（/iPhone/i））{
$（“选择[多个]）。每个（函数（）{
var select=$（this）.on({
“focusout”：函数（）{
var values=select.val（）| 124;[]；
setTimeout（函数（）{
select.val（values.length？值：['']）.change（）；
}, 1000);
}
});
var firstOption='«；Select'+（Select.attr（'title'）| |'Options'）+'»；
第一选项+=''；
选择.prepend（第一个选项）；
});
}

这在前几天发布的7.1中已经部分修复，但是仍然存在许多问题。物品计数现在是正确的，但是

• 您可以选择optgroup标题（您不应该这样做，如果是这样，它至少应该选择/取消选择整个组）

• 如果您禁用一个选项

  computer1

  ，您仍然可以选择它，这当然也是完全错误的

把它放在一起，苹果。

简单添加：

<option disabled></option>

---

作为multiple select的第一个元素。

我似乎想出了一个解决办法，解决了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>');
    });
}

/**
*iOS多功能选择修复。
*/
if（navigator.userAgent.match（/（iPod | iPhone | iPad）/）{
$（“选择[多个]）。每个（函数（）{
$（this.prepend（“”）；
$（此）。附加（“”）；
});
}

有趣的是，iPad上没有问题，只有iPhone（我猜是iPodtouch）链接到的可能重复：和另一个线程关于显然相同的事情：我知道这是旧的，但有人知道这个修复程序是否也适用于optgroup吗？不，它不适用于optgroup。但您可以修改它以取消选择禁用的选项。另外，如果第一个子对象是optgroup，您将尝试选择它-浏览器将崩溃，所以这个脚本不会让事情变得更糟，因为它添加了没有值的假第一选项，并防止浏览器崩溃。只需添加禁用的选项就可以修复它。focusout事件处理程序是不必要的。（iOS 9.3.1）@tkburbidge如果您查看代码上方的注释，您将看到此针对iPhone 7.0.3的修补程序在iOS 9.1中仍处于崩溃状态：/

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