WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery Mobile Form Select Menus


jQuery Mobile Select Menus

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

The <select> component makes a drop-down list with a few alternatives.

The <option> components inside the <select> component characterize the accessible alternatives in the list:

Example

<form method="post" action="demoform.asp">
  <fieldset class="ui-field-contain">
    <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 considerable rundown of alternatives that are connected, utilize the <optgroup> component 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 pictures over this page, demonstrates how portable stages have their own particular manner of appearing select menu.

If you need the select menu to show the equivalent on every single cell phone, utilize jQuery's possess custom select menu, the information local menu="false" attribute:

Example

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

Multiple Selections

To select various alternatives in the select menu, utilize the different trait in the <select> element:

Example

<select name="day" id="day" multiple information local menu="false">
Try it yourself »

Using information role="controlgroup"
The most effective method to gather at least one choice menus.

Using information type="horizontal"
Step by step instructions to bunch choice menus horizontally.

Using information type="mini"
Instructions to minify a choice menu.

Pre-chose options
Instructions to pre-select an option.

Popup Selections
Instructions to make a popup choice menu.

Collapsible Forms
Instructions to make collapsible forms.

Changing the default select icon
Step by step instructions to change the symbol of select menus (default is "bolt d").

Changing the symbol position
The most effective method to change the symbol position of select menus (default is right).