iOS 9.2：选择列表（多个）错误触发更改事件并将值设置为焦点上的第一个选项。（狩猎和铬）

我对iOS浏览器（chrome和safari）中的多选列表有问题。在我的例子中，我在select上有一个角度模型绑定，它在我关注select时触发观察程序并更新模型值。我相信这是iOS 9.2中的一个bug。以下是具体症状：

铬：

一旦select元素被聚焦，就会触发“change”事件，并将值设置为第一项，即使UI没有显示任何选择。从列表中选择其他选项并关闭iOS覆盖后，该值将更改为正确的值。如果您再次关注它，“更改”事件将再次触发，并且第一个选项的值将再次添加。这一次关闭覆盖会使第一个项目处于选中状态

狩猎：

一旦select元素被聚焦，“change”事件被触发，值被设置为第一项。在这种情况下，覆盖中的UI不显示任何选择，但原始“选择”中的文本现在显示选定的第一项。实际上，选择第一次时，即使UI清楚地显示您已经选择了第一项，也会将该值设置为null。当您聚焦并模糊“选择”时，它将继续切换列表中第一个选项的值。基本上，除了不正确地将第一项添加到焦点上的值之外，此浏览器还将丢失该值与UI之间的同步

我创建了一个非常简化的JSFIDLE来演示这种行为

HTML

测试1
测试2
测试3
测试4
测试5
测试6
日志：

JS（仅用于记录事件和值）

$（'select'）。更改（函数（事件）{
$（'div'）.append（'change:'+$（'select'）.val（）+'
'）；
});

---

这是一个已知的问题吗？有什么解决办法吗？

我也有同样的问题。这有助于解决这个问题：

诀窍是在第一个位置添加一个空且已禁用的选择选项：

测试1
测试2
测试3

这将阻止iOS自动选择第一个选项，并保持选择值正确和干净

空选项不可见，并且选择的计数正确。

用户仍然可以选择，即使它没有开始选择

是一个更好的解决方案：

测试1
测试2
测试3
测试4

<select name="test" multiple>
  <option value="test1">test1</option>
  <option value="test2">test2</option>
  <option value="test3">test3</option>
  <option value="test4">test4</option>
  <option value="test5">test5</option>
  <option value="test6">test6</option>
</select>
<div>
  Log:
</div>

$('select').change(function(event){
    $('div').append('<p>change:'+$('select').val()+'</p>');
});