Easy Tutorial
Jquerymobile Pages Event Pageload Jquerymobile Grids Jquerymobile List Views Jquerymobile Events Page Jquerymobile Popups Event Pagebeforeshow Event Pagebeforehide Jquerymobile Events Scroll Jquerymobile Tutorial Jquerymobile List Content Jquerymobile Tables Jquerymobile Install Jquerymobile Themes Jquerymobile Collapsibles Jquerymobile Navbars Event Pageinit Event Pagebeforecreate Event Pagecreate Jquerymobile Ref Data Jquerymobile Ref Css Event Scrollstop Jquerymobile Panels Event Pagecontainerload Event Pagecontainerloadfailed Jquerymobile Form Basic Jquerymobile Transitions Event Swipeleft Jquerymobile Ref Icons Jquerymobile Events Event Pagebeforeload Jquerymobile Form Select Jquerymobile Icons Event Pageshow Jquerymobile Form Sliders Event Swiperight Event Pagehide Jquerymobile Events Touch Jquerymobile Toolbars Jquerymobile Events Orientation Event Swipe Jquerymobile Intro Jquerymobile Buttons Event Taphold Event Tap Jquerymobile Ref Events Event Scrollstart Jquerymobile Form Inputs Event Pageloadfailed Event Pagecontainerbeforeload Jquerymobile Examples Jquerymobile Filters Event Orientationchange
❮ Event Pagebeforeload Jquerymobile Icons ❯

jQuery Mobile Form Select Menu

jQuery Mobile Select Menu

The <select> element creates a drop-down list with several options.

The <option> elements within the <select> element define the available options in the list:

Example

Tip: If you have a long list with related options, use the <optgroup> element within the <select>:

Example

Custom Select Menu

The image at the top of this page demonstrates how to display a select menu on mobile platforms.

If you want the select menu to look the same on all mobile devices, use the custom select menu provided by jQuery, with the data-native-menu="false" attribute:

Example

data-native-menu="false">

Multiple Selection

To select multiple options in the select menu, use the multiple attribute in the <select> element:

Example

multiple data-native-menu="false">

More Examples

Using data-role="controlgroup"

Using data-type="horizontal"

Pre-selected Options

Using data-type="mini"

Popup Options

Collapsible Form

Modify Default Select Icon

Modify Icon Position

❮ Event Pagebeforeload Jquerymobile Icons ❯