jQuery Mobile Form Select

## jQ Mobile Tutorial

jQ Mobile HOME jQ Mobile Intro jQ Mobile Install jQ Mobile Pages jQ Mobile Transitions jQ Mobile Buttons jQ Mobile Icons jQ Mobile Toolbars jQ Mobile Navbars jQ Mobile Collapsibles jQ Mobile Grids

## jQ Mobile Lists

jQ Mobile List Views jQ Mobile List Content

## jQ Mobile Forms

jQ Mobile Form Basic jQ Mobile Form Inputs jQ Mobile Form Select jQ Mobile Form Sliders

## jQ Mobile Themes

jQ Mobile Themes

## jQ Mobile Events

jQ Mobile Events jQ Mobile Touch jQ Mobile Scroll jQ Mobile Orientation jQ Mobile Page Events

## Examples

jQ Mobile Examples

## References

jQ Data Attributes jQ Events jQ Icons

# jQuery Mobile Form Select Menus

« Previous
Next Chapter »

## jQuery Mobile Select Menus

Select Menu on an Iphone:
Select Menu on an Android/SGS4 device:

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

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

## Example

<form method="post" action="demoform.asp">
<fieldset data-role="fieldcontain">
<label for="day">Select Day</label>
<select name="day" id="day">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
</select>
</fieldset>
</form>
Try it yourself »

Tip: If you have a long list of options that are related, use the <optgroup> element inside <select>:

## Example

<select name="day" id="day">
<optgroup label="Weekdays">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
</optgroup>
<optgroup label="Weekends">
<option value="sat">Saturday</option>
<option value="sun">Sunday</option>
</optgroup>
</select>
Try it yourself »

## Custom Select Menus

The images on top of this page, shows how mobile platforms have their own way of showing a select menu.

If you want the select menu to display the same on all mobile devices, use jQuery's own custom select menu, the data-native-menu="false" attribute:

## Example

<select name="day" id="day" data-native-menu="false">
Try it yourself »

## Multiple Selections

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

## Example

<select name="day" id="day" multiple data-native-menu="false">
Try it yourself »

## More Examples

Using data-role="controlgroup"
How group one or more selection menus.

Using data-type="horizontal"
How group selection menus horizontally.

Pre-selected options
How to pre-select an option.

Collapsible Forms
How to create collapsible forms.

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE