jQuery Mobile 表單選擇菜單
jQuery Mobile 選擇菜單
iPhone 上的選擇菜單:
Android 設(shè)備上的選擇菜單:
<select> 元素創(chuàng)建帶有若干選項的下拉菜單。
<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>
提示:如果列表中包含了一長列相關(guān)的選項,請在 <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>
自定義選擇菜單
本頁上方的圖片,展示了移動平臺顯示選擇菜單的獨特方式。
如果您希望在所有移動設(shè)備上顯示一致外觀的選擇菜單,請使用 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"
- 如何水平地組合選擇菜單。
- 預(yù)選選項
- 如何預(yù)選擇一個選項。
- 可折疊表單
- 如何創(chuàng)建可折疊表單。