1. Home
  2. jQuery Mobile form selection

The best jQuery Mobile form selection Tutorial In 2024, In this tutorial you can learn jQuery Mobile Select Menu,Examples,Examples,Custom Select Menu,Examples,Multiple selection,Examples,More examples,

jQuery Mobile form selection

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

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


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

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


Multiple selection

To select more than one option in the Select menu, use the multiple attribute in <select> element:

Examples

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


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

Hot Tools

Other Tools

Online Tutorial

Website Navigation

jQuery Mobile form selection
10/30