jQuery Mobile 表单选择菜单

jQuery Mobile -valintamenut

iPhone-laitteiden valintamenut:

Android-laitteiden valintamenut:

<select>-elementti luo alasvetovalikon, jossa on useita vaihtoehtoja.

<select>-elementin <option>-elementit määrittelevät luettelossa olevat saatavilla olevat vaihtoehdot:

esimerkki

<form method="post" action="demoform.asp">
  <fieldset data-role="fieldcontain">
    <label for="day">Valitse päivämäärä</label>
    <select name="day" id="day">
      <option value="mon">Maanantai</option>
      <option value="tue">Tiistai</option>
      <option value="wed">Keskiviikko</option>
    </select>
  </fieldset>
</form>

Kokeile itse

Vinkki:Jos luettelossa on pitkä lista liittyviä vaihtoehtoja, käytä <select>-elementissä <optgroup>-elementtiä:

esimerkki

<select name="day" id="day">
   <optgroup label="Arkipäivät">
    <option value="mon">Maanantai</option>
    <option value="tue">Tiistai</option>
    <option value="wed">Keskiviikko</option>
   </optgroup>
   <optgroup label="Viikonloppu">
    <option value="sat">Lauantai</option>
    <option value="sun">Sunnuntai</option>
   </optgroup>
</select>

Kokeile itse

Mukautettu valintamenu

Tämä sivulla ylempänä oleva kuva näyttää eri tavat, joilla valintamenut näytetään mobiilialustoilla.

Jos haluat näyttää valintamenun yhtenäisessä ulkoasussa kaikilla mobiililaitteilla, käytä jQuery:n mukautettua valintamenua, data-native-menu="false"-ominaisuus:

esimerkki

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

Kokeile itse

Useita valintoja

Jos haluat valita useita vaihtoehtoja valintamenusta, käytä <select>-elementin multiple-ominaisuutta:

esimerkki

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

Kokeile itse

Lisää esimerkkejä

Käytä data-role="controlgroup"
Miten yhdistää yksi tai useampi valintamenu.
Käytä data-type="horizontal"
Miten horisontaalisesti yhdistää valintamenut.
Etukäteen valittu vaihtoehto
Miten valita etukäteen yksi vaihtoehto.
Kääntyvä lomake
Miten luoda kääntyvä lomake.