iOS 9.2：Select 列出（多个）错误地触发更改事件并将值设置为焦点上的第一个选项。 （野生动物园和 chrome）

Question

我在 iOS 浏览器（chrome 和 safari）中遇到多个 select 列表的问题。在我的例子中，我在 select 上绑定了一个 angular 模型，一旦我关注 select，它就会触发观察者并更新模型值。我相信这是 iOS 9.2 中的错误。以下是具体症状：

Chrome:

只要 select 元素获得焦点，就会触发 "change" 事件并将值设置为第一项，即使 UI 显示没有 select离子。 select 从列表中选择一个不同的选项并关闭 iOS 叠加层后，该值更改为正确的值。如果您随后再次关注它，将再次触发 "change" 事件并再次添加第一个选项的值。这次关闭叠加层会留下第一项 selected。

野生动物园：

一旦 select 元素获得焦点，就会触发 "change" 事件并将值设置为第一项。在这种情况下，叠加层中的 UI 不显示 select 离子，但原始 select 中的文本现在显示第一项为 selected。实际上 select 第一次将值设置为 null，即使 UI 清楚地表明您现在已经 selected 第一项。当您聚焦并模糊 select 时，它将继续切换是否包含列表中第一个选项的值。基本上除了错误地将第一项添加到焦点值之外，此浏览器还失去了值与 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

我遇到了同样的问题。 帮助解决了这个问题：

诀窍是在第一个位置添加一个empty and disabled select选项：

<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 自动 select 第一个选项并保持 selection 值正确和干净！

空选项不可见，select离子计数正确。

Answer 2

<option disabled> 仍然可供用户选择，即使它没有开始选择。

<optgroup> 是更好的解决方案：

<select multiple>
  <optgroup disabled hidden></optgroup>
  <option value="test1">test1</option>
  <option value="test2">test2</option>
  <option value="test3">test3</option>
  <option value="test4">test4</option>
</select>