jQuery Mobile - Custom Select Menu

The custom select menu is used to display the menu list in the popup format.

Below table demonstrates the types of custom selectmenu in detail.

Sr.No. Type & Description
1 Basic Custom SelectMenu

Include data-native-menu = "false" attribute to display menu in popup format.

2 Long List

It displays the long list for custom select menu when there is more number of list available.

3 Mini Sized

Include attribute data-mini = "true" for creating mini version custom select menu.

4 Icon Left

The menu icon is set at left by using data-iconpos = "left" attribute in the fieldset.

5 Data Placeholder

Placeholder specifies a short hint that describes the expected value.

6 Option w/o value

The <option> tags are used to define an item in a selection list and the value = "" attribute sets the default value of the variable in the name attribute.

7 Empty option w/o value

Any <option> w/o value can be kept empty in the custom select menu.

8 Selected Option

In the <option> tags, add attribute selected = "selected" to select a particular option.

9 Disabled Option

Set the attribute disabled = "disabled" in the <option> element to make the custom select menu option disable.

10 Multiple select option

Include multiple = "multiple" in the <select> elements to make multiple selected option in the custom listview.

11 Multiple, icon left, long list

Set the icon on the left side by adding the attribute data-iconpos = "left" in the <select> element.

12 Optgroup

The optgroup jQuery mobile elements is used to group the selection list and the <option> tags are used to define an item under that particular group in a selection list.

13 Vertical controlgroup

Set the data-role = "controlgroup" attribute in the fieldset to vertically group the custom select menu.

14 Vertical controlgroup, icon left, mini sized

Include data-mini="true" attribute in the fieldset to create mini size vertical group custom select menu.

15 Horizontal controlgroup

Set the select menu horizontally by including the data-type = "horizontal" to the fieldset.

16 Horizontal controlgroup, mini sized

Include data-mini = "true" attribute in the fieldset to create the horizontal group select menu in the mini size.

Kickstart Your Career

Get certified by completing the course

Get Started