Menu wyboru formularza jQuery Mobile

Menu wyboru jQuery Mobile

Menu wyboru na urządzeniach iPhone:

Menu wyboru na urządzeniach Android:

Element <select> tworzy rozwijane menu z kilkoma opcjami.

Elementy <option> w elemencie <select> definiują dostępne opcje listy:

Przykładowo

<form method="post" action="demoform.asp">
  <fieldset data-role="fieldcontain">
    <label for="day">Wybierz datę</label>
    <select name="day" id="day">
      <option value="mon">Monday</option>
      <option value="tue">Tuesday</option>
      <option value="wed">Wednesday</option>
    </select>
  </fieldset>
</form>

Spróbuj sam

Wskazówka:Jeśli lista zawiera długi wiersz powiązanych opcji, użyj elementu <optgroup> w elemencie <select>:

Przykładowo

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

Spróbuj sam

Niestandardowe menu wyboru

Zdjęcie powyżej tej strony pokazuje unikalny sposób wyświetlania menu wyboru na platformach mobilnych.

Jeśli chcesz, aby menu wyboru miało jednolity wygląd na wszystkich urządzeniach mobilnych, użyj niestandardowego menu wyboru jQuery, atrybut data-native-menu="false":

Przykładowo

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

Spróbuj sam

Wielokrotne wybory

Jeśli chcesz wybrać wiele opcji w menu wyboru, użyj atrybutu multiple w elemencie <select>:

Przykładowo

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

Spróbuj sam

Więcej przykładów

Użyj data-role="controlgroup"
Jak połączyć jeden lub więcej menu wyboru.
Użyj data-type="horizontal"
Jak poziomo połączyć menu wyboru.
Przedselekcjonowane opcje
Jak przedselekcjonować opcję.
Foldery formularza
Jak utworzyć foldery formularza.