jQuery Mobile form selection

Previous: jQuery Mobile form input

Next: jQuery Mobile slider form

jQuery Mobile Select Menu

Select the menu on the Iphone:

Android / SGS4 selection menu on the device:

<Select> element to create a drop-down list with several options.

<Select> <option> element defines the elements in the list of available options:

Examples

<form method="post" action="demoform.html">
<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"

Tip: If you are a long list of options have an associated with the use <optgroup> element in the <select> within:

Examples

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

Custom Select Menu

Image top of this page that demonstrates how to use the mobile platform the way they display a selection menu.

If you want the selection menu on all mobile devices will display the same, use jQuery's own custom choice menus, data-native-menu = "false" attribute: