Dynamically Populating Select Control

Dynamically Populating Select Control

Hi,

I have found problems with dynamically populating a select control, the simple logic I use works fine in standard JQuery but not in JQueryMobile.  The code is as follows:

  1.  <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <title>Select Test</title>
  5.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css"/>
  6.     <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
  7.     <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
  8.     <script type="text/javascript">
  9.         $(document).ready(function init()
  10.                           {
  11.                               console.log("init");
  12.                               var options='<option value="1">Test 2</option>';
  13.                               $("select#select-choice-1").append(options);
  14.                           });
  15.     </script>
  16. </head>
  17. <body>
  18. <div data-role="page" data-theme="b" id="jqm-home">
  19.     <div data-role="content">
  20.         <div data-role="fieldcontain">
  21.             <label for="select-choice-1" class="select">Choose:</label>
  22.             <select name="select-choice-1" id="select-choice-1">
  23.                 <option value="0">Test 1</option>
  24.             </select>
  25.         </div>
  26.     </div>
  27. </body>
  28. </html>
What happens is (1) the select only populates with the single 'test 1' option value (2) on first click of the select this single option (still only one option) is displayed as per usual with JQueryMobile (3) on select of this 'test 1' option the select then loses its selected option rendering the select empty (4) on third click of the select control it then re-displays the option list but this time correctly showing both options?