jQuery Mobile form selection
jQuery Mobile Select Menu
<Select> element to create a drop-down list with several options.
<Select> <option> element defines the elements in the list of available options:
Examples
<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>
Tip: If you are a long list of options have an associated with the use <optgroup> element in the <select> within:
Examples
<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>
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:
Examples
Multiple selection
To select more than one option in the Select menu, use the multiple attribute in <select> element:
Examples
More examples
Using data-role = "controlgroup"
How to combine one or more selection menu.
Use data-type = "horizontal"
How to choose a combination of the horizontal menu.
Preselected options
How to preselect an option.
Use data-type = "mini"
How to narrow the options menu
Options pop
How to create a pop options menu.
Collapsible form
How to create a collapsible form
Modify the default selection icon
How to modify the options menu icon (the default is "arrow-d").
Edit icon location
How to modify the position of the icon displayed (default to the right).