Search within TutorialsPark

jQuery Mobile : Select Elements


Learn how to use jQuery Mobile to create Select Form Fields.


jQuery Mobile: Selection Widget

A jQuery Mobile Select widget is created using the element select and option element containing the selector options.

jQuery Mobile recognizes select element and automatically converts them into enhanced select menu.

Syntax: jQuery Mobile Selection Widget

Give it a TRY! » Note: The dropdown select is not enhanced.


jQuery Mobile: Minified Select

A minified version of the select widget is selected using the attribute data-mini="true" within the element select

Syntax: jQuery Mobile Minified Select

Give it a TRY! » Note: Minified version are useful if screen size is limited


jQuery Mobile: Wrap Select Widget

In order to make the Select and Label appear visually together in a single line use the attribute ui-field-contain within a container.

Syntax: jQuery Mobile Wrap Select Widget

Give it a TRY! » Note: Notice that the select elements appear visually together.


jQuery Mobile: OptGroup Select Widget

In order to organise the select options into optgroup, use HTML5 element optgroups.

Syntax: jQuery Mobile Optgroup Select Widget

Give it a TRY! » Note: The name of the optgroup is specified using attribute label within element optgroup.


jQuery Mobile: Vertical Select Groups

A Group of Select elements can be grouped using class ui-field-contain with the container, along with the attribute data-role="controlgroup" within the element fieldset

Syntax: jQuery Mobile Vertical Select Groups

Give it a TRY! » Note: The rounded corners of the only the top and bottom buttons are preserved while rest are removed.


jQuery Mobile: Horizontal Select Groups

The Default grouping of buttons in a control group takes place Vertically. However, users can align the button horizontally using the attribute data-type="horizontal".

Syntax: jQuery Mobile Horizontal Select Groups

Give it a TRY! » Note: All margins and padding in between the individual buttons are removed.


jQuery Mobile: Disable Native Select Menus

In all examples until now, the select dropdown was not enhanced like other jQuery Mobile Widgets. So, in order to apply enhancement to select dropdowns use the attribute data-native-menu="false" within the element select

Example: jQuery Mobile - Disable Native Select Menus

Give it a TRY! » Note: By default, the enhancements are not applied to select dropdown.


jQuery Mobile: Multiple Select Widget

A Select Menu can also be enabled to get multiple selections from a single select input, this is done by using the attribute multiple="multiple" within the element select.

Syntax: jQuery Mobile Multiple Select Widget

Give it a TRY! » Note: The Switches can be toggled by tapping or clicking the slider.


jQuery Mobile: Setting Placeholder Elements

Placeholder are values that are first shown in the select element, when the element is first displayed, but the value of placeholder isn't an option to be selected.

You can use the option element as a placeholder for the select element, by setting the value of attribute placeholder to true.

Syntax: jQuery Mobile Setting the Placeholder.

Give it a TRY! » Note: If any of the option is set as selected , then the placeholder value is not displayed.


jQuery Mobile: Handling Select Menu Programmatically

The Select Menu Widget can be controlled programmatically using the methods given below.

Table: jQuery Mobile - Method for Selected Elements

Method Description
selectmenu("open") TO open the select Menu
selectmenu("close") To close the select Menu.
selectmenu("refresh") To refresh the widget inorder to bring out changes done in the select Element.