jQuery Mobile Form Select Menu

jQuery Mobile selection menu

Selection menu on iPhone:

Selection menu on Android devices:

The <select> element creates a dropdown menu with several options.

The <option> elements within the <select> element define the available options in the list:

Example

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

Try it yourself

Tip:If the list contains a long list of related options, use the <optgroup> element in the <select>:

Example

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

Try it yourself

Custom Selection Menu

The image above this page shows the unique way selection menus are displayed on mobile platforms.

If you want to display a consistent appearance of selection menus on all mobile devices, use jQuery's custom selection menu, the data-native-menu="false" attribute:

Example

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

Try it yourself

Multiple Selections

If you want to select multiple options in the selection menu, use the multiple attribute in the <select> element:

Example

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

Try it yourself

More Examples

Use data-role="controlgroup"
How to combine one or more selection menus.
Use data-type="horizontal"
How to horizontally combine a selection menu.
Pre-selected Option
How to pre-select an option.
Collapsible Form
How to create a collapsible form.