<div data-role="fieldcontain"> <label for="select-choice-3">分组选择列表</label> <select data-native-menu="false"> <optgroup label="Group1"> <option value="12h">12小时</option> <option value="1d">一天</option> <option value="2d">两天</option> <option value="week">一周</option> </optgroup> <optgroup label="Group2"> <option value="1m">一个月</option> <option value="1q">一季度</option> <option value="1y">一年</option> </optgroup> </select> </div>
7.滑杆
在 jQuery Mobile 中，type="range" （ HTML5 属性值 ） 的 input 元素会被增强为划杆组件，该组件可以通过一些属性值配置，value 设置滑杆的初始值， min 和 max 分别设置滑杆的下限和上限。另外滑杆组件还支持键盘响应，键盘的右箭头，上箭头，Page Up 键都可以增加滑杆的当前值，相应的，左键头，下箭头， Page Down 键可以减少滑杆的当前值，使用 Home 键和 End 键则可以设置当前值为最小值（下限）和最大值（上限）。
<div data-role="fieldcontain"> <label for="slider">滑杆</label> <input type="range" value="0" min="0" max="100" /> </div>
8.开关
具有两个 option 的 select 元素添加 data-role="slider" 属性后会被增强为 jQuery Mobile 的开关组件，用于表示布尔型数据（ ture or false ），拖动滑动条可以在“开”与“关”之间选择，其中第一个 option 会被渲染成“开”的样式。
<div data-role="fieldcontain"> <label for="slider">开关</label> <select data-role="slider"> <option value="off">关闭</option> <option value="on">开启</option> </select> </div>
三.提交表单
jQuery Mobile 自动采用 Ajax 的方式提交表单，默认的 method 为 get ，action 为当前页面的相对路径，在表单页面和结果页面之间会有平滑的转场过渡，并且可以在表单上使用 data-transition 指定转场效果。如果不想使用 Ajax 的方式提交表单，可以在全局事件禁用 Ajax （如何全局禁止 Ajax 并不在本文讨论范围，但会在本系列的后续文章中作详细说明）或是在 form 上添加 data-ajax="false" 属性，下面是 data-transition 的所有可取值。
slide 滑动（默认值，从左至右滑出）， slideup（从下至上滑出）， slidedown（从上至下滑出）， pop（从中心渐显展开）， fade（渐显）， flip（翻转）。
四.主题样式
关于主题样式，在上一文中已经介绍过了，这里引用一下：
“data-theme=“” 属性， 所有的 jQuery Mobile 组件均支持该属性，用于设置组件的颜色， 该属性默认有五个值 a, b, c, d, e，分别代表由深到浅五种颜色，另外开发者还可以通过在 CSS 里添加相应的 Class 来自定义颜色。”
五.刷新表单组件
由于 jQuery Mobile 对原生的 HTML 表单元素进行了渲染和追加元素，所以开发者想通过 js 直接控制表单组件会比较麻烦（如使用了 Web SQL Database 储存了数据在本地，在打开网页时希望通过 js 获取数据并给表单组件赋值的情况），因此 jQuery Mobile 设计了用 js 给表单组件赋值的 API ，下面逐一举例介绍：
1.单选按钮
选择第一个选项
$("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");
2.复选按钮
选择第一个选项
$("input[type='checkbox']:first").attr("checked",true).checkboxradio("refresh");
3.选择列表
选择第一个选项，注意选项的索引是从1开始
var myselect = $('select#select-choice-1'); myselect[0].selectedIndex = 1; myselect.selectmenu('refresh');
4.滑杆
设置值为40
$("input[type=range]").val(40).slider("refresh");
5.开关
选择第一个选项
var myswitch = $('select#shakeToClear'); myswitch[0].selectedIndex = 1; myswitch.slider('refresh');