Menu de sélection de formulaires jQuery Mobile

Menu de sélection jQuery Mobile

Menu de sélection sur les appareils iPhone :

Menu de sélection sur les appareils Android :

L'élément <select> crée un menu déroulant avec plusieurs options.

Les éléments <option> dans l'élément <select> définissent les options disponibles dans la liste :

Exemple

<form method="post" action="demoform.asp">
  <fieldset data-role="fieldcontain">
    <label for="day">Choisir une date</label>
    <select name="day" id="day">
      <option value="mon">Lundi</option>
      <option value="tue">Mardi</option>
      <option value="wed">Mercredi</option>
    </select>
  </fieldset>
</form>

Essayer personnellement

Astuce :Si la liste contient une longue série d'options liées, utilisez l'élément <optgroup> dans <select> :

Exemple

<select name="day" id="day">
   <optgroup label="Weekdays">
    <option value="mon">Lundi</option>
    <option value="tue">Mardi</option>
    <option value="wed">Mercredi</option>
   </optgroup>
   <optgroup label="Weekends">
    <option value="sat">Samedi</option>
    <option value="sun">Dimanche</option>
   </optgroup>
</select>

Essayer personnellement

Menu de sélection personnalisé

L'image au sommet de cette page montre la manière unique dont les menus de sélection s'affichent sur les plateformes mobiles.

Si vous souhaitez afficher un aspect cohérent sur tous les appareils mobiles, utilisez le menu de sélection personnalisé de jQuery, l'attribut data-native-menu="false" :

Exemple

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

Essayer personnellement

Sélections multiples

Si vous souhaitez sélectionner plusieurs options dans le menu de sélection, utilisez l'attribut multiple dans l'élément <select> :

Exemple

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

Essayer personnellement

Plus d'exemples

Utiliser data-role="controlgroup"
Comment combiner un ou plusieurs menus de sélection.
Utiliser data-type="horizontal"
Comment combiner horizontalement un menu de sélection.
Option préselectionnée
Comment préselectionner une option.
Formulaire pliable
Comment créer un formulaire pliable.