Multi Выберите <select> на мобильных устройствах

У меня есть интерфейс, который использует множественные списки выбора с высотой набора css для заполнения других списков.

В принципе:

<select multiple="multiple" size="5" style="height:150px;">
    <option value='1'>one</option>
    <option value='2'>two</option>
    <option value='3'>three</option>
    <option value='4'>four</option>    

</select>

<select multiple="multiple" style="height:150px;"></select>

Используя jQuery, в основном вы выбираете некоторые вещи в первом, и он перемещает их ко второму.

Это отлично работает, и наши пользователи любят его в немобильных средах. НО, на планшетах Android, телефонах, iphones и ipads, списки выглядят пустыми до тех пор, пока вы не нажмете кнопку, и на нем появится встроенный интерфейс выбора прокрутки. Таким образом, вы не можете видеть новые, когда они добавляются ко второму списку.

Этот очень простой jsFiddle показывает, о чем я говорю, когда поля выбора не отображают их содержимое:

http://jsfiddle.net/VhXwA/2/

Есть ли способ переопределить это поведение без необходимости делать свою собственную вещь или использовать совершенно другой способ сделать это для мобильных устройств?

Если нет способа сделать это, что было бы лучшим способом реализовать что-то вроде мобильного?

Edit:

Вот базовая картина того, как выглядит этот интерфейс, списки в любом поле могут быть очень длинными или короткими. но они имеют заданную высоту, для согласованности:

Изменить: Я не могу себе представить, что я единственный, кто сталкивается с этим! Должен быть способ заставить мобильные браузеры вести себя правильно.

Ответ 1

Такое поведение в мобильных браузерах по своей сути улучшает работу пользователей. Согласно Руководство по веб-контенту Safari

Использовать элемент выбора. Если вы используете элемент HTML в своем веб-страницы, iOS отображает настраиваемый элемент управления, оптимизированный для выбор элементов в списке с помощью пальца в качестве устройства ввода. На iOS, пользователь может щелкнуть, чтобы прокрутить список и нажать, чтобы выбрать элемент из списка.

Это сказано:

Я бы рекомендовал не бороться с ним, но использовать его ради мобильных пользователей.
использовать медиа-запросы для применения разных css для ваших элементов select для рабочего стола и мобильных устройств браузеры;
если количество отображаемых параметров достаточно мало, используйте <input type="checkbox">

вместо select, потому что это поведение согласовано между браузерами.

Ответ 2

Из того, что я понимаю, я думаю, что было бы намного проще перенаправить на другую страницу в зависимости от выбранной опции, если нет причины, по которой вы не выбрали это в первую очередь.

Я не понимаю, почему вы не можете просто использовать раскрывающийся список флажков. Они совместимы практически везде и, безусловно, на всех смартфонах.

<select name="Dropdown1">
<option value="o1">Option 1</option>
<option value="o2">Option 2</option>
<option value="o3">Option 3</option>
<option value="o4">Option 4</option>
</select>

или

<input type="checkbox" name="checkbox" value="o1">Option 1<br>
<input type="checkbox" name="checkbox" value="o2">Option 2

(http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select2 и http://www.w3schools.com/html/html_forms.asp)

Ответ 3

Я использую подобный интерфейс, и он отлично подойдет для пользователей настольных компьютеров, но совершенно не интуитивно понятен на сенсорных устройствах, где мультивыбор не отображается как многострочный прокручиваемый список.

Похоже, вам нужен полностью настраиваемый элемент управления, но я нашел два элемента управления JQuery, которые, как представляется, реализуют эту функциональность (хотя и несколько иначе).

Eric Hynds JQuery UI multiselect: http://www.erichynds.com/blog/jquery-ui-multiselect-widget

Quasi Partikels сортируемый многопользовательский виджет с возможностью поиска: http://quasipartikel.at/multiselect/

Оба они кажутся немного затруднительными для устройства размера телефона, но особенно для версии Quasi Partikel, которая использует небольшой "+" слева от элемента, чтобы добавить его, в то время как Eric Hynds позволяет использовать весь элемент для выбрать/отменить выбор. Либо можно улучшить с помощью мобильных конкретных стилей, чтобы увеличить размер критических элементов, я полагаю.