jQuery Mobile を使っている場合、セレクトメニューを表示するときにネイティブメニューで表示するか、jQuery Mobile のカスタムメニューを表示するかを選ぶことができる。

select タグに data-native-menu="false" を指定すると jQuery Mobile のカスタムメニューとなる。指定しなければネイティブメニューとなる。

ただし、
$.mobile.ignoreContentEnabled = true;

と指定している場合は、カスタムメニューで表示はできない。
また、
$.mobile.selectmenu.prototype.options.nativeMenu = false;

を指定しておくことでデフォルトをカスタムメニューとすることができる。この場合は、data-native-menu="true" を指定した select 要素のみネイティブメニューとなる。

下はセレクトメニューを jQuery Mobile のカスタムメニューで表示したサンプルだが、実はリストのダイアログが画面に収まるときと収まらないときで表示されるダイアログが違うようだ。画面に収まらないときに表示されるダイアログでは見出しが表示されない模様。

サンプル

<!DOCTYPE html>
<head>
    <title>jQuery mobile でセレクトメニュー表示</title>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
     <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page"> 
    <div data-role="header">ヘッダ</div>
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="type">セレクトメニュー</label>
            <select id="select-1" data-native-menu="false">
                <option value="">ひとつ選んでください。</option>
                <option value="1">りんご</option>
                <option value="2">みかん</option>
                <option value="3">バナナ</option>
                <option value="4">メロン</option>
                <option value="5">いちご</option>
                <option value="6">パイナップル</option>
                <option value="7">マンゴー</option>
            </select>
        </div>
        <div data-role="fieldcontain">
            <label for="type">セレクトメニュー(複数)</label>
            <select id="select-2" multiple data-native-menu="false">
                <option value="">複数えらんでください。</option>
                <option value="1">りんご</option>
                <option value="2">みかん</option>
                <option value="3">バナナ</option>
                <option value="4">メロン</option>
                <option value="5">いちご</option>
                <option value="6">パイナップル</option>
                <option value="7">マンゴー</option>
            </select>
        </div>
    </div> 
    <div data-role="footer">フッタ</div> 
</div> 
</body>
</html>