Множественная выборка для мобильного Safari

Если вы обнаружили действительно раздражающую ошибку в текущем (iOS 9.2) мобильном сафари (впервые появившемся с iOS 7!)

Если вы используете несколько полей выбора на мобильном сафари - например:

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

У вас будут проблемы с автоматическим выбором!

iOS автоматически выбирает первый вариант после того, как вы открыли выбор (без какого-либо взаимодействия с пользователем), но он не отобразит его вам с синим цветом, выберите "check".

Итак, если вы теперь выбираете второй вариант, select укажет вам, что выбраны две опции (но только выделение одного из них выбрано)...

Если вы сейчас закроете и снова откройте выбор, iOS автоматически отменит выбор первого значения - если вы повторите, он будет снова выбран без какого-либо взаимодействия с пользователем.

Это действительно раздражающая системная ошибка, которая нарушает работу пользователя!

Ответ 1

Решение для множественной выборки сафари и Пустое и Отключено проблема, связанная с тиком:

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

Ответ 2

После долгого исследования я нашел следующее (не самое красивое), но работающее решение:

Трюк заключается в том, чтобы добавить опцию пустой и отключенный в первом положении:

<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 автоматически выбрать первый вариант и сохранить значения выбора правильно и очистить!

Пустая опция не видна, и подсчет выбранных значений правильный.