jQuery Mobile форма выбора меню

Выбор меню jQuery Mobile

Выбор меню на iPhone:

Выбор меню на устройствах Android:

Элемент <select> создает выпадающее меню с несколькими вариантами:

Элемент <option> в элементе <select> определяет доступные варианты списка:

Пример

<form method="post" action="demoform.asp">
  <fieldset data-role="fieldcontain">
    <label for="day">Выберите дату</label>
    <select name="day" id="day">
      <option value="mon">星期一</option>
      <option value="tue">星期二</option>
      <option value="wed">星期三</option>
    </select>
  </fieldset>
</form>

Попробуйте сами

Подсказка:Если список содержит множество связанных вариантов, используйте элемент <optgroup> в <select>:

Пример

<select name="day" id="day">
   <optgroup label="Weekdays">
    <option value="mon">Monday</option>
    <option value="tue">Tuesday</option>
    <option value="wed">Wednesday</option>
   </optgroup>
   <optgroup label="Weekends">
    <option value="sat">Saturday</option>
    <option value="sun">Sunday</option>
   </optgroup>
</select>

Попробуйте сами

Пользовательский выбор меню

Изображение вверху этой страницы показывает уникальный способ отображения меню выбора на мобильных платформах.

Если вы хотите, чтобы выбор меню выглядел одинаково на всех мобильных устройствах, используйте пользовательский выбор меню jQuery с атрибутом data-native-menu="false":

Пример

<select name="day" id="day" data-native-menu="false">

Попробуйте сами

Множественный выбор

Если вам нужно выбрать несколько вариантов в меню выбора, используйте атрибут multiple в элементе <select>:

Пример

<select name="day" id="day" multiple data-native-menu="false">

Попробуйте сами

Более сложные примеры

Использование data-role="controlgroup"
Как комбинировать один или несколько меню выбора.
Использование data-type="horizontal"
Как горизонтально комбинировать меню выбора.
Предварительно выбранная опция
Как предварительно выбрать опцию.
Складывающиеся формы
Как создать складывающуюся форму.