jQuery Mobile 選擇菜單

iPhone 上的選擇菜單：

Android 設(shè)備上的選擇菜單：

<select> 元素創(chuàng)建帶有若干選項(xiàng)的下拉菜單。

<select> 元素中的 <option> 元素定義列表中的可用選項(xiàng)：

實(shí)例

<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)的選項(xiàng)，請(qǐng)?jiān)?<select> 中使用 <optgroup> 元素：

實(shí)例

<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>

親自試一試

自定義選擇菜單

本頁上方的圖片，展示了移動(dòng)平臺(tái)顯示選擇菜單的獨(dú)特方式。

如果您希望在所有移動(dòng)設(shè)備上顯示一致外觀的選擇菜單，請(qǐng)使用 jQuery 的自定義選擇菜單，data-native-menu="false" 屬性：

實(shí)例

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

親自試一試

Multiple Selections

如需在選擇菜單中選取多個(gè)選項(xiàng)，請(qǐng)?jiān)?<select> 元素中使用 multiple 屬性：

實(shí)例

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

親自試一試