移动Safari多选错误

如果发现一个真正恼人的错误在当前(iOS 9.2)移动Safari(首先出现自iOS 7!)

如果您在移动Safari上使用多个select字段 – 如下所示:

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

你将有自动select的问题!

在打开select(没有任何用户交互)之后,iOS会自动select第一个选项,但不会用蓝色select“检查”显示给您。

所以,如果你现在select第二个选项,select将告诉你,select了两个选项(但只高亮显示一个select)…

如果您现在closures并再次打开select,iOS将自动取消select第一个值 – 如果您重复,则会在没有任何用户交互的情况下再次select。

这真是一个恼人的系统错误,这是打破用户体验!

Safari浏览器多选错误和空白禁用选项打勾相关的问题的解决scheme:

 <select multiple> <optgroup disabled hidden></optgroup> <option value="0">All</option> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> <option value="4">Test 4</option> </select> 

经过长时间的研究,我发现以下(不是最美丽的),但工作的解决scheme:

诀窍是在第一个位置添加一个空的和禁用的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第一个选项,并保持select值正确和干净!

空白选项不可见,select的计数是正确的。