4

我在 iOS 浏览器（chrome 和 safari）中的多选列表有问题。在我的情况下，我在选择上有一个角度模型绑定，它会在我关注选择时触发观察者并更新模型值。我相信这是 iOS 9.2 中的一个错误。以下是具体症状：

铬合金：

一旦选择元素获得焦点，就会触发“change”事件并将值设置为第一项，即使 UI 没有显示任何选择。从列表中选择不同的选项并关闭 iOS 覆盖后，该值会更改为正确的值。如果您再次关注它，“更改”事件将再次触发，并再次添加第一个选项的值。这次关闭覆盖会保留选中的第一个项目。

苹果浏览器：

一旦选择元素被聚焦，就会触发“change”事件并将值设置为第一项。在这种情况下，叠加层中的 UI 不显示任何选择，但原始选择中的文本现在将第一个项目显示为已选择。实际上第一次选择时，即使 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>');
});

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

4

2 回答 2

3

我遇到过同样的问题。这个答案有助于解决它：

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

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

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

于 2016-01-28T14:31:24.800 回答
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>
于 2021-01-08T23:51:25.660 回答