Menu di selezione di moduli jQuery Mobile

Menu di selezione jQuery Mobile

Menu di selezione su iPhone:

Menu di selezione su dispositivi Android:

L'elemento <select> crea un menu a discesa con diverse opzioni.

L'elemento <option> all'interno dell'elemento <select> definisce le opzioni disponibili nella lista:

Esempio

<form method="post" action="demoform.asp">
  <fieldset data-role="fieldcontain">
    <label for="day">Seleziona la data</label>
    <select name="day" id="day">
      <option value="mon">Lunedì</option>
      <option value="tue">Martedì</option>
      <option value="wed">Mercoledì</option>
    </select>
  </fieldset>
</form>

Prova personalmente

Suggerimento:Se la lista contiene una lunga serie di opzioni correlate, utilizzare l'elemento <optgroup> all'interno di <select>:

Esempio

<select name="day" id="day">
   <optgroup label="Giorni feriali">
    <option value="mon">Lunedì</option>
    <option value="tue">Martedì</option>
    <option value="wed">Mercoledì</option>
   </optgroup>
   <optgroup label="Weekend">
    <option value="sat">Sabato</option>
    <option value="sun">Domenica</option>
   </optgroup>
</select>

Prova personalmente

Menu di selezione personalizzato

L'immagine superiore di questa pagina mostra il modo unico in cui viene visualizzato il menu di selezione sui dispositivi mobili.

Se si desidera visualizzare un aspetto coerente su tutti i dispositivi mobili, utilizzare il menu di selezione personalizzato di jQuery, attributo data-native-menu="false":

Esempio

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

Prova personalmente

Selezione multipla

Se si desidera selezionare più opzioni nel menu di selezione, utilizzare l'attributo multiple nell'elemento <select>:

Esempio

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

Prova personalmente

Più esempi

Usare data-role="controlgroup"
Come combinare una o più menu di selezione.
Usare data-type="horizontal"
Come combinare un menu di selezione orizzontalmente.
Opzione preselezionata
Come preselezionare un'opzione.
Modulo pieghevole
Come creare un modulo pieghevole.