jQuery Mobile 表單選擇

jQuery Mobile 選擇選單

Iphone 上的選擇選單：
Android/SGS4 裝置上的選擇選單：

<select> 元素建立帶有若干選項的下拉列表。

<select> 元素內的 <option> 元素定義了列表中的可用選項：

例項

<form method="post" action="demoform.html">
<fieldset class="ui-field-contain">
<label for="day">Select Day</label>
<select name="day" id="day">
<option value="https://www.itread01.com/jquerymobile/mon">Monday</option>
<option value="https://www.itread01.com/jquerymobile/tue">Tuesday</option>
<option value="https://www.itread01.com/jquerymobile/wed">Wednesday</option>
</select>
</fieldset>
</form>

嘗試一下 ?

提示：如果您有一個帶有相關選項的很長的列表，請在 <select> 內使用 <optgroup> 元素：

例項

<select name="day" id="day">
<optgroup label="Weekdays">
<option value="https://www.itread01.com/jquerymobile/mon">Monday</option>
<option value="https://www.itread01.com/jquerymobile/tue">Tuesday</option>
<option value="https://www.itread01.com/jquerymobile/wed">Wednesday</option>
</optgroup>
<optgroup label="Weekends">
<option value="https://www.itread01.com/jquerymobile/sat">Saturday</option>
<option value="https://www.itread01.com/jquerymobile/sun">Sunday</option>
</optgroup>
</select>

嘗試一下 ?

自定義選擇選單

本頁頂部的影象，演示了移動平臺上如何使用它們的方式展示一個選擇選單。

如果您想要讓選擇選單在所有的移動裝置上都顯示相同，請使用 jQuery 自帶的自定義選擇選單，data-native-menu="false" 屬性：

例項

<select name="day" id="day" data-native-menu="false">

嘗試一下 ?

多個選擇

如需在選擇選單中選擇多個選項，請在 <select> 元素中使用 multiple 屬性：

例項

<select name="day" id="day" multiple data-native-menu="false">

嘗試一下 ?

例項

更多例項

使用 data-role="controlgroup"
如何組合一個或多個選擇選單。

使用 data-type="horizontal"
如何水平組合選擇選單。

預選中選項
如何預選中一個選項。

使用 data-type="mini"
如何縮小選項選單

彈窗選項
如何建立一個彈窗選項選單。

可摺疊表單
如何建立可摺疊表單

修改預設選擇項圖示
如何修改選項選單圖示 (預設為 "arrow-d").

修改圖示位置
如何修改圖示顯示的位置 (預設向右)。