jQuery Mobile formulväljmeny

jQuery Mobile urvalsmeny

Urvalsmeny på iPhone:

Urvalsmeny på Android-enheter:

<select>-elementet skapar en rullgardinsmeny med flera alternativ.

Elementet <option> i <select>-elementet definierar de tillgängliga alternativen i listan:

Exempel

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

Prova själv

Tips:Om listan innehåller en lång rad relaterade alternativ, använd <optgroup>-elementet i <select>-elementet:

Exempel

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

Prova själv

Anpassad urvalsmeny

Bilden ovan på sidan visar de unika sätt som urvalsmenyer visas på mobila plattformar.

Om du vill visa en enhetlig utseende i alla mobila enheter, använd jQuery:s anpassade urvalsmeny, egenskapen data-native-menu="false":

Exempel

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

Prova själv

Flera val

Om du vill välja flera alternativ i urvalet, använd multiple-egenskapen i <select>-elementet:

Exempel

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

Prova själv

Mer exempel

Använd data-role="controlgroup"
Hur man kombinerar en eller flera valmenyer.
Använd data-type="horizontal"
Hur man kombinerar valmenyer horisontellt.
Fördefinierade val
Hur man fördefinierar ett val.
Fällbara formulär
Hur man skapar en fällbar formulär.