jQuery mobileでブラウザネイティブのselectダイアログを使う

jQuery mobileでselect要素を使うとbodyの後部に選択ダイアログ用のdiv要素を追加してそれっぽく表示してくれる（デモ）。

ただAjaxで動的にoption要素を生成するような場合だとjQuery mobileの初期化に行われるDOMツリーの書き換えのタイミングと合わなくて、意図したとおりにoption要素に追加したものがダイアログに表示されなかったりする。

こういうときはとりあえずselect要素にdata-native-menu="true"を追加すれば、ブラウザネイティブの選択ダイアログが使われるようになるので、動的にoptionを追加した場合にも追従できる。

<select name="fruit" data-native-menu="true">
  <option>Apple</option>
  <option>Orange</option>
  <option>Banana</option>
</select>

あまり見た目は良くないかもしれないけど、応急処置ということであれば十分かと思う。