Select Menu Options
Description
The selectmenu plugin has the following options:
corners
corners boolean default: true
Select menu buttons have rounded corners by default. Setting this option to false will remove the rounded corners.
This option is also exposed as a data attribute: data-corners="false".
$( "#select1" ).selectmenu({ corners: false });disabled
disabled boolean default: false
Disables the element. We can enable and disable the select menu.
$("#select1" ).selectmenu({ disabled: true });hidePlaceholderMenuItems
hidePlaceholderMenuItems boolean default: true
By default, placeholder menu items will be hidden from view when the select menu is open.
To allow the placeholder item to be selectable, set this value to false.
$( "#select1" ).selectmenu({ hidePlaceholderMenuItems: false });icon
icon string default: "arrow-d"
Sets the icon for the select button.
This option is also exposed as a data attribute: data-icon="plus".
$( "#select1" ).selectmenu({ icon: "plus" });iconpos
iconpos string default: "right"
Sets the icon position. The possible values are: "left", "right", "none", and "notext".
The "notext" value will display the select as an icon-only button with no placeholder text.
The "none" value will remove the icon completely.
This option is also exposed as a data attribute: data-iconpos="none".
$( "#select1" ).selectmenu({ iconpos: "notext" });iconshadow
iconshadow boolean default: true
When true, the framework will add a drop shadow to the icon.
This option is also exposed as a data attribute: data-iconshadow="false".
$( "#select1" ).selectmenu({ iconshadow: false });initSelector
initSelector CSS selector string default: "select:not(:jqmData(role='slider'))"
The initSelector is used to define the selectors that trigger the automatic initialization.
For instance, all elements that are matched by the default selector will be enhanced by the select menu plugin.
To override this selector, bind to the mobileinit event and update the selector as necessary:
$(document).bind( "mobileinit", function(){
$.mobile.selectmenu.prototype.options.initSelector = "..";
});
inline
inline boolean default: false
If set to true, this will make the select button appear as an inline button. By default, select buttons will consume the entire width of their container.
In contrast, inline buttons only consume the width of their placeholder text.
This option is also exposed as a data attribute: data-inline="true".
$( "#select1" ).selectmenu({ inline: true });nativeMenu
nativeMenu boolean default: true
By default, select buttons will launch the native select picker for the OS.
To render the select menu in a custom HTML/CSS view, set this value to false.
This option is also exposed as a data attribute: data-native-menu="false".
$( "#select1" ).selectmenu({ nativeMenu: false });shadow
shadow boolean default: true
By default, select buttons will have a drop shadow applied. Setting this option to false will remove the drop shadow.
This option is also exposed as a data attribute: data-shadow="false".
$( "#select1" ).selectmenu({ shadow: false });theme
theme string default: null. Inherited from parent.
Sets the theme color scheme for element. This is a letter from a to z.
By default, this will inherit the same swatch color as its parent container.
This option is also exposed as a data attribute: data-theme="a".
$( "#select1" ).selectmenu({ theme: "a" });