jquery created dropdown not displaying in ie8

Question

I have code that creates a dropdown list but in the IE8 the dropdown has the correct number of entries but the text are blank. They do contain the correct values. I cannot see what is missing?

if(max_ch>0){
    var newDiv = $('<div>Room '+(i+1)+' <select class="adu" name="data[Rate]['+r_id+']['+ro_id+'][adults][]"></select> adults. <select class="chi" name="data[Rate]['+r_id+']['+ro_id+'][children][]"></select> children.</div>');
    newDiv.attr("id","occupants"+i).appendTo(showdiv+' .rooms_adults');

    var roomPrice = $('<input type="hidden" name="data[Rate]['+r_id+']['+ro_id+'][prices][]" value="'+room_bo+'" />');
    roomPrice.attr("id","roomprice"+i).appendTo(showdiv+' .rooms_adults');

    var num_opts = Number(max_ad)+1;
    for( ad=0; ad < num_opts; ad++){
        $(showdiv+' #occupants'+i+' select.adu').append(new Option(ad, ad));
    }
    var num_opts = Number(max_ch)+1;
    for( ch=0; ch < num_opts; ch++){
        $(showdiv+' #occupants'+i+' select.chi').append(new Option(ch, ch));                    
    }
    $(showdiv+' #occupants'+i+' select.adu').val('1');

} else {

Answer 1

You could either use

var num_opts = Number(max_ad) + 1,
    slc_adu = $(showdiv+' #occupants'+i+' select.adu');
for( ad=0; ad < num_opts; ad++){
    slc_adu.append("<option value=\"" + ad + "\">" + ad + "</option>");
}

or

var num_opts = Number(max_ad) + 1,
    slc_adu = $(showdiv+' #occupants'+i+' select.adu'),
    options = slc_adu.attr("option");
for( ad=0; ad < num_opts; ad++){
    options[options.length] = new Option(ad, ad);
}

Otherwise IE wont show the associated text values of the options.

Answer 2

The Josh answer worked for me: Adding options to a <select> using jQuery?:

var o = new Option("option text", "value");
/// jquerify the DOM object 'o' so we can use the html method
$(o).html("option text");
$("#selectList").append(o);