JQM dynamic page with select dialog bug?

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="testing jquery mobile select after changepage" />
  <title></title>
  <meta charset=utf-8 />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
  <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  <script>
    $(document).bind("mobileinit", function () {
        $.mobile.ajaxEnabled = false;
        $.mobile.selectmenu.prototype.options.nativeMenu = false;
        $.mobile.defaultPageTransition = 'none';
        $.mobile.defaultDialogTransition = 'none';
        $.mobile.loadingMessageTextVisible = true;
        $.mobile.loadingMessage = "Loading";
    });

    function changetoPage2(){
        //page2 normally comes from an ajax call
        $('#page2').remove();
        $('body').append('<div data-role="page" id="page2"><div data-role="header"><h1>Page2</h1></div><!-- /header --><div data-role="content"><select id="testselect"><option value="option1">option1</option><option value="option2">option2</option><option value="option3">option3</option><option value="option4">option4</option><option value="option5">option5</option><option value="option6">option6</option><option value="option7">option7</option><option value="option8">option8</option><option value="option9">option9</option><option value="option10">option10</option><option value="option11">option11</option><option value="option12">option12</option><option value="option13">option13</option><option value="option14">option14</option><option value="option15">option15</option><option value="option16">option16</option><option value="option17">option17</option><option value="option18">option18</option><option value="option19">option19</option><option value="option20">option20</option><option value="option21">option21</option><option value="option22">option22</option></select></div><!-- /content --><div data-role="footer"><h4>Footer</h4></div><!-- /footer --></div><!-- /page -->');
        $('#page2').page();
        $.mobile.changePage($('#page2'), { reverse: false, changeHash: false, fromHashChange: false, history: false });
    }
    // custom scripts go here
  </script>
  <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
  <style type="text/css">
    <!-- custom style overrides go here -->
  </style>
</head>
<body>

    <div data-role="page" id="page1">

      <div data-role="header">
        <h1>Page1</h1>
      </div><!-- /header -->

      <div data-role="content">
        <input type='button' value='Page2' onclick='changetoPage2();'/>


      </div><!-- /content -->

      <div data-role="footer">
        <h4>Footer</h4>
      </div><!-- /footer -->

    </div><!-- /page -->

</body>
</html>