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

自分で試してみてください

複数選択

選択メニューで複数のオプションを選択する必要がある場合、<select>要素にmultiple属性を使用してください：

例

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

自分で試してみてください

さらに多くの例

data-role="controlgroup"を使用する
1つまたは複数の選択メニューを組み合わせる方法
data-type="horizontal"を使用する
水平に選択メニューを組み合わせる方法
事前に選択されたオプション
オプションを選択する方法
折り畳み可能なフォーム
折り畳み可能なフォームを作成する方法