{"id":150,"date":"2023-08-25T17:35:02","date_gmt":"2023-08-25T17:35:02","guid":{"rendered":"\/\/api.jquerymobile.com\/1.4\/?p=150"},"modified":"2023-08-25T17:35:02","modified_gmt":"2023-08-25T17:35:02","slug":"selectmenu","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.4\/selectmenu\/","title":{"rendered":"Selectmenu Widget"},"content":{"rendered":"

\nSelectmenu Widget<\/span>version added: 1.0<\/span>\n<\/h2>\n
\n

Description: <\/strong>Creates a select menu widget<\/p>\n

QuickNavExamples<\/a>\n<\/h2><\/header>
\n

Options<\/h3>\n
closeText<\/a><\/div>\n
corners<\/a><\/div>\n
defaults<\/a><\/div>\n
disabled<\/a><\/div>\n
dividerTheme<\/a><\/div>\n
hidePlaceholderMenuItems<\/a><\/div>\n
icon<\/a><\/div>\n
iconpos<\/a><\/div>\n
iconshadow<\/a><\/div>\n
initSelector<\/a><\/div>\n
inline<\/a><\/div>\n
mini<\/a><\/div>\n
nativeMenu<\/a><\/div>\n
overlayTheme<\/a><\/div>\n
preventFocusZoom<\/a><\/div>\n
shadow<\/a><\/div>\n
theme<\/a><\/div>\n<\/div>\n
\n

Methods<\/h3>\n
close<\/a><\/div>\n
destroy<\/a><\/div>\n
disable<\/a><\/div>\n
enable<\/a><\/div>\n
open<\/a><\/div>\n
option<\/a><\/div>\n
refresh<\/a><\/div>\n<\/div>\n
\n

Events<\/h3>\n
create<\/a><\/div>\n<\/div><\/section>
\n\t\t

The select menu is based on a native select element, which is hidden from view and replaced with a custom-styled select button that matches the look and feel of the jQuery Mobile framework. The select menu is ARIA-enabled and keyboard accessible on the desktop as well.<\/p>\n\t\t

By default, the framework leverages the native OS options menu to use with the custom button. When the button is clicked, the native OS menu will open. When a value is selected and the menu closes, the custom button's text is updated to match the selected value. Please note that the framework also offers the possibility of having custom (non-native) select menus.<\/p>\n\t\t

To add a select menu to your page, start with a standard select<\/code> element populated with a set of option<\/code> elements. Set the for<\/code> attribute of the label<\/code> to match the id<\/code> of the select<\/code> so they are semantically associated. It's possible to accessibly hide the label if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.<\/p>\n\n\t\t

The framework will find all select<\/code> elements and automatically enhance them into select menus, no need to apply a data-role<\/code> attribute. To prevent the automatic enhancement of a select, add data-role="none"<\/code> attribute to the select<\/code>.<\/p>\n\n

\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
7<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
<label<\/span> for<\/span>="select-choice-0"<\/span> class<\/span>="select"<\/span>><\/span>Shipping method:<\/label<\/span>><\/span><\/code><\/div><\/div>
<select<\/span> name<\/span>="select-choice-0"<\/span> id<\/span>="select-choice-0"<\/span>><\/span><\/code><\/div><\/div>
  <option<\/span> value<\/span>="standard"<\/span>><\/span>Standard: 7 day<\/option<\/span>><\/span><\/code><\/div><\/div>
  <option<\/span> value<\/span>="rush"<\/span>><\/span>Rush: 3 days<\/option<\/span>><\/span><\/code><\/div><\/div>
  <option<\/span> value<\/span>="express"<\/span>><\/span>Express: next day<\/option<\/span>><\/span><\/code><\/div><\/div>
  <option<\/span> value<\/span>="overnight"<\/span>><\/span>Overnight<\/option<\/span>><\/span><\/code><\/div><\/div>
<\/select<\/span>><\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t
This will produce a basic select menu. The default styles set the width of the input to 100% of the parent container and stacks the label on a separate line.\n\t\t