jquery mobile fieldcontain css error

Question

I've added some selectboxes to data-role fieldcontain, but even though the append functions are correct, jquery mobile doesn't show properly the selectboxes.

JS:

var container = $("#addprogram").find(".addprogramlist");
container.empty();
// alert(eArray);
for(var i = 1; i <=7; i++)
{
  var day = getDay(i);
  container.append("<label for='day-" + i + "' class='select'>" + day + "</label><select name='day-" + i + "' id='day-" + i + "'>");

      for (var j = 0; j < eArray.length; j++)
      {

        container.append("<option value='" + eArray[j] + "'>" +  eArray[j] + "</option>");

      }
      container.append("</select>");
}

HTML:

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

    <div data-role="header" data-position="fixed">
        <h1>Add Program</h1>
        <a href="#" data-rel="back" data-theme="a">Back</a>
    </div><!-- /header -->
    <div data-role="content" class='addprogramcontent'>
       <div data-role="fieldcontain" class='addprogramlist'>
       </div>
    </div>
</div><!-- /page -->

Answer 1

I don't know if I understood your problem correctly, but this might be the answer:

try refreshing your selectmenus as follows:

$("select").selectmenu();

working example http://jsfiddle.net/PG2bV/54/

EDIT

I changed a little your code. That is how I usually do to build a select.