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 WidgetGive 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 SelectGive 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 WidgetGive 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 WidgetGive 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 GroupsGive 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 GroupsGive 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 MenusGive 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 WidgetGive 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
|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.|