Mam's WebSite
建築CGパース住宅CGパース

Mamの覚書Q&A検索

トップページMamの覚書Q&A検索WEB(jQueryMobile)⇒Q&A


大項目:「 WEB 」 - 中項目:「 jQueryMobile 」

「 jQueryMobileのセレクトメニューの基本 」

jQueryMobileのセレクトメニューの基本について


回答

以下参照。
 
参考URL
http://mam-mam.net/jqm_sample/select.html

ソース

セレクトメニュー
  <div data-role="fieldcontain">
    <label for="ssel1" class="select">OS選択</label>
    <select id="ssel1" name="ssel1" data-native-menu="false" >
      <option>選択してください</option>  <!-- 未選択時に表示される文字列 -->
      <optgroup label="以下から選択">
        <option value="Windows" style="font-size:20pt" selected>Windows</option>
        <option value="Mac OS X">Mac OS X</option>
        <option value="Linux">Linux</option>
        <option value="TRON">TRON</option>
      </optgroup>
    </select>
  </div>
 

セレクトメニュー複数選択可能
  <div data-role="fieldcontain">
    <label for="mybook">本の選択:</label>
    <select id="mybook" name="mybook" data-native-menu="false" multiple>
      <option>選択してください</option>  <!-- 未選択時に表示される文字列 -->
      <optgroup label="HTML5開発">  <!-- グループラベル -->
        <option value="html5_01">すごいよHTML5</option>
        <option value="html5_02">やったねHTML5</option>
        <option value="html5_03">やさしいHTML5</option>
      </optgroup>
      <optgroup label="jQuery">    <!-- グループラベル -->
        <option value="refjQuery_01" selected>やさしくjQuery</option>
        <option value="refjQuery_02" selected>はじめてのjQyery</option>
        <option value="refjQuery_03">jQueryとは</option>
        <option value="refjQuery_04">上級者向けjQuery</option>
      </optgroup>
      <optgroup label="Delphi">    <!-- グループラベル -->
        <option value="refDelphi_01" selected>やさしくDelphi</option>
        <option value="refDelphi_02">はじめてのDelphi</option>
        <option value="refDelphi_03">Delphiとは</option>
        <option value="refDelphi_04">上級者向けDelphi</option>
        <option value="refDelphi_05">超簡単Delphi</option>
        <option value="refDelphi_06" selected>超便利Delphi</option>
      </optgroup>
    </select>
  </div>


Mam's WebSite