Question

So I have a, no doubt, simple problem, but it has me fairly stumped as to what the problem is. I am using a jQuery function to append a <li> to the <ul>. It is all going as planned except that the drop-down <select> menu isn’t showing me any options. It merely displays the first <option> and never gives me any other options. I feel like its something very simple, but I can’t seem to find where the problem is. Any ideas?

Thanks in advance for the help.

$('#courses').append('<li class="plan" ><table width="100%" ><tr><td>'+fallNamesArray[i]+' Credit Hours: '+fallNamesArray[i]+' Grade: </td><td align="right"><select id="grd" style="width:20px" data-mini="true" ><option>A</option><option>A-</option><option>B+</option><option>B</option><option>B-</option><option>C+</option><option>C</option><option>C-</option><option>D</option><option>E</option></select></td><td><input type="submit" value="Add Course" data-mini="true" /></td><td align="right"><input type = "button" class="del" value="Delete" data-icon="delete" data-mini="true" data-inline ="true" data-iconpos="right" /></td></tr></table></li>').listview('refresh');

By the way, I apologize about the “run-on line.”

Answer 1

Remove the width:20px from the select’s style or increase it.

jsFiddle example