iOS 9.2：选择列表（多个）不正确地触发更改事件并将值设置为焦点上的第一个选项。 （safari和chrome）

Question

我在iOS浏览器中有多个选择列表（chrome和safari）有问题。在我的情况下，我有一个角度模型绑定的选择，这是射击观察者和更新模型值，只要我专注于选择。我相信这是iOS 9.2中的一个错误。下面是具体的症状：

铬：

只要选择的元素集中在“变”事件被触发，该值设置的第一个项目，即使UI没有显示出选择。从列表中选择不同的选项并关闭iOS叠加层后，该值将更改为正确的值。如果您再次关注它，则会再次触发“更改”事件，并再次添加第一个选项的值。这次关闭叠加层会留下所选的第一个项目。

Safari浏览器：

只要选择的元素集中在“变”事件被触发，该值设置的第一个项目。在这种情况下，叠加层中的用户界面不显示选择内容，但原始选择中的文本现在将第一项显示为选定内容。实际上，第一次选择时，即使UI清楚地显示您已经选择了第一项，该值也会设为null。当您关注并模糊选择时，它会继续切换列表中第一个选项的值。基本上，除了将第一项添加到焦点值之外，此浏览器也失去了值与UI之间的同步。

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

http://jsfiddle.net/u922mnvv/4/

HTML

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

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

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

这是一个已知的问题？有没有解决办法？

Answer 1

我有同样的问题。这answer帮助解决它：

的窍门是在拳头的位置增加空和残疾人选择选项：

<select multiple> 
    <option disabled></option> 

    <option value="test1">Test 1</option> 
    <option value="test2">Test 2</option> 
    <option value="test3">Test 3</option> 
</select> 

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

空白选项不可见，选择的计数是正确的。