jQuery Mobile form selection
May 21, 2021 jQuery Mobile
Table of contents
jQuery Mobile form selection menu
jQuery Mobile select menu
The element creates a pull-down list with several options.
The element within the element defines the options available in the list:
<fieldset data-role="fieldcontain">
<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 out . . .
Tip: If you have a long list with relevant options, please use the elements of the slt;optgroup;gt;
<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 out . . .
Custom selection menu
The images at the top of this page demonstrate how mobile platforms can use them to present a selection menu.
If you want the selection menu to look the same on all mobile devices, use jQuery's own custom selection menu, the data-native-menu-false property:
Multiple choices
To select more than one option in the selection menu, use the multiple property in the element:
More instances
Use data-role-"controlgroup"
How to combine one or more selection menus.
Using data-type-"horizontal"
How to select menus horizontally.
Preselect options
How to preselect an option.
The form is collapsible
How to create a collapsible form.
With jQuery Mobile, you can make your form selection even more effective, and you should feel it with the examples above, and in the next section, let's take a look at how jQuery Mobile's form slider works!