Jquery Mobile - Select box basic usage

This example demonstrates how to use select element with Jquery Mobile styling.

by Shreerang Patwardhan

HTML

<div data-role="page">
    <div data-role="content">
        <form>
            <label for="select-option">Choose Framework</label>
            <select name="select-option" id="select-option">
                <option value="jqm">Jquery Mobile</option>
                <option value="mproj" disabled>The M Project</option>
                <option value="sencha">Sencha Touch</option>
            </select>
        </form>
        
        <form>
            <label for="select-option">Choose Framework</label>
            <select name="select-option" id="select-option" data-mini="true">
                <option value="jqm">Jquery Mobile</option>
                <option value="mproj">The M Project</option>
                <option value="sencha">Sencha Touch</option>
            </select>
        </form>
        
        <form>
            <div data-role="fieldcontain">
                <label for="select-option">Choose Framework</label>
                <select name="select-option" id="select-option">
                    <option value="jqm">Jquery Mobile</option>
                    <option value="mproj" disabled>The M Project</option>
                    <option value="sencha">Sencha Touch</option>
                </select>
            </div>
        </form>
        
        <form>
            <label for="select-option">Choose Framework</label>
            <select name="select-option" id="select-option">
                <optgroup label="Javascript Mobile frameworks">
                    <option value="jqm">Jquery Mobile</option>
                    <option value="mproj" disabled>The M Project</option>
                    <option value="sencha">Sencha Touch</option>
                </optgroup>
                <optgroup label="New Javascript frameworks">
                    <option value="bb">BackboneJs</option>
                    <option value="ang" disabled>AngularJs</option>
                    <option value="ko">KnockoutJs</option>
                </optgroup>
          ...