jQuery Mobile 表单选择菜单
jQuery Mobile 选择菜单
iPhone 上的选择菜单:
Android 设备上的选择菜单:
<select> 元素创建带有若干选项的下拉菜单。
<select> 元素中的 <option> 元素定义列表中的可用选项:
实例
<form method="post" action="demoform.asp">
<fieldset data-role="fieldcontain">
<label for="day">选择日期</label>
<select name="day" id="day">
<option value="mon">星期一</option>
<option value="tue">星期二</option>
<option value="wed">星期三</option>
</select>
</fieldset>
</form>
提示:如果列表中包含了一长列相关的选项,请在 <select> 中使用 <optgroup> 元素:
实例
<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>
自定义选择菜单
本页上方的图片,展示了移动平台显示选择菜单的独特方式。
如果您希望在所有移动设备上显示一致外观的选择菜单,请使用 jQuery 的自定义选择菜单,data-native-menu="false" 属性:
实例
<select name="day" id="day" data-native-menu="false"
>
Multiple Selections
如需在选择菜单中选取多个选项,请在 <select> 元素中使用 multiple 属性:
实例
<select name="day" id="day" multiple
data-native-menu="false">
更多实例
- 使用 data-role="controlgroup"
- 如何组合一个或多个选择菜单。
- 使用 data-type="horizontal"
- 如何水平地组合选择菜单。
- 预选选项
- 如何预选择一个选项。
- 可折叠表单
- 如何创建可折叠表单。