Search within TutorialsPark

jQuery Mobile : Select Elements


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


jQuery Mobile: Using Select Elements

jQuery Mobile provides a way to select items in the within a form using the element select. You can press the down icon button to select elements.

The default behaviour of the browser can be overrided to create a pop-up menu which can be used for touch selection, to use this feature set the value of attribute data-native-menu to false within a select element.

Example: jQuery Mobile - Using Select Elements

Give it a TRY! » Note: User can apply other themes and enhacements


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.

Table: jQuery Mobile - jQuery Mobile Layout Grid

Names Class Icon Demo
Action ui-icon-action Try It »
Alert ui-icon-alert Try It »
Arrow Downward ui-icon-arrow-d Try It »
Arrow Down Left ui-icon-arrow-d-l Try It »
Arrow Down Right ui-icon-arrow-d-r Try It »
Arrow Left ui-icon-arrow-l Try It »
Arrow Right ui-icon-arrow-r Try It »
Arrow Upper ui-icon-arrow-u Try It »
Arrow Upper Left ui-icon-arrow-u-l Try It »
Arrow-u-r ui-icon-arrow-u-r Try It »
Audio ui-icon-audio Try It »
Back ui-icon-back Try It »
Bars ui-icon-bars Try It »
Bullets ui-icon-bullets Try It »
Calendar ui-icon-calendar Try It »
Camera ui-icon-camera Try It »
Carat Downward ui-icon-carat-d Try It »
Carat Left ui-icon-carat-l Try It »
Carat Right ui-icon-carat-r Try It »
Carat Upper ui-icon-carat-u Try It »
Check ui-icon-check Try It »
Clock ui-icon-clock Try It »
Cloud ui-icon-cloud Try It »
Comment ui-icon-comment Try It »
Delete ui-icon-delete Try It »
Edit ui-icon-edit Try It »
Eye ui-icon-eye Try It »
Forbidden ui-icon-forbidden Try It »
Forward ui-icon-forward Try It »
Gear ui-icon-gear Try It »
Grid ui-icon-grid Try It »
Heart ui-icon-heart Try It »
Home ui-icon-home Try It »
Info ui-icon-info Try It »
Location ui-icon-location Try It »
Lock ui-icon-lock Try It »
Mail ui-icon-mail Try It »
Minus ui-icon-minus Try It »
Navigation ui-icon-navigation Try It »
Power ui-icon-phone Try It »
Plus ui-icon-plus Try It »
Power ui-icon-power Try It »
Recycle ui-icon-recycle Try It »
Refresh ui-icon-refresh Try It »
Search ui-icon-search Try It »
Shop ui-icon-shop Try It »
Star ui-icon-star Try It »
Tag ui-icon-tag Try It »
User ui-icon-user Try It »
Video ui-icon-video Try It »

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.

jQuery Mobile: Creating Flip Switches

To create select element with only two options, you can create flip switch .

A Flip switch can be created by applying the attribute data-role to select element, with the value set as slider

Syntax: jQuery Mobile Creating Flip Switches

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