jQuery Mobile Form Select Menu
jQuery Mobile Select Menu
The <select> element creates a dropdown list with several options.
The <option> elements inside the <select> element define the available options in the list:
Example
<fieldset class="ui-field-contain">
<label for="day">Select Day</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 you have a very long list of related options, use the <optgroup> element inside the <select>:
Example
<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 Select Menu
The images at the top of this page demonstrate how a select menu is displayed on mobile platforms.
If you want the select menu to display the same on all mobile devices, use jQuery's built-in custom select menu with the data-native-menu="false" attribute:
Multiple Select
To select multiple options in a select menu, use the multiple attribute in the <select> element:
More Examples
Using
data-role="controlgroup"
How to combine one or more select menus.
Using
data-type="horizontal"
How to combine select menus horizontally.
Pre-selected Options
How to pre-select an option.
Using
data-type="mini"
How to shrink a select menu.
Popup Options
How to create a popup select menu.
Collapsible Forms
How to create a collapsible form.
Change the Default Select Icon
How to modify the select menu icon (default is "arrow-d").
Change the Icon Position
How to change the position of the icon (default is to the right).