Bug in .val() on select with jQuery Mobile?

Bug in .val() on select with jQuery Mobile?

Hi all

I'm having a problem with `.val()` and jQuery Mobile.

This is my code in total. The attempt to set the value of the select as Quietest is not working: it selects Balanced.

  2. <!DOCTYPE html> 
  3. <html> 
  4. <head> 
  5. <title>Page Title</title> 
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
  7. <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
  8. <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
  9. <script type="text/javascript">
  10. $(document).ready(function() {
  11.        $("#routetype").val('quietest');
  12.      });
  13. </script>
  14. </head> 
  15. <body> 
  16.     <!-- Start of first page -->
  17.     <div data-role="page" id="foo">
  18.      <div data-role="header">
  19.      <h1>Foo</h1>
  20.      </div><!-- /header -->
  21.      <div data-role="content">
  22.      <select id="routetype" name="routetype">
  23.             <option value="fastest">Fastest</option>
  24.             <option value="balanced">Balanced</option>
  25.             <option value="quietest">Quietest</option>
  26.             </select>
  27.         </div><!-- /content -->
  28.     <div data-role="footer">
  29.      <h4>Page Footer</h4>
  30.      </div><!-- /header -->
  31.     </div><!-- /page -->
  32. </body>
  33. </html>

However, if I remove the jQuery mobile script, it works perfectly.

Any thoughts?