I created another global variable s and load s with all options. When load the table, I load all options first and then replace the selecteditem add "selected="selected" . Now it works. This may not be best practice. Please give me your suggestion.
var TypeOptions = @Html.Raw(Json.Encode(ViewData["Type"]));
var s='<option value="">Select Type</option>';
for (var e=0; e < TypeOptions.length; e++)
{
var lt = TypeOptions[e];
s += '<option value="'+lt["TypeId"]+'">'+lt["Type"]+' </option>';
}
success: function (returndata)
{
if (returndata.ok) {
var tbl = "<table id="tbl" border="1" class="table table-hover"><thead><table><tbody><tr style="text-align:center;">"
tbl += "<th>Name</th><th>Hours</th><th>Comment</th><th>Type</th></tr></tbody></table></thead>"
$("#Table").append(tbl);
$.each(returndata.data, function (index, itemData) {
var tbody = "<tr style="text-align:center;"><td><input id='txtName"+itemData.Id+"' style='width:70px;' type='text' value='"+itemData.Name+"'></td>"
tbody +="<td><input id='txtHours"+itemData.Id+"' style='width:40px;' type='text' value='"+itemData.Hours+"'></td>"
tbody +="<td><input id='txtComent"+itemData.Id+"' type='text' value='"+itemData.Comment+"'></td>"
tbody +="<td><select id='ddlType"+itemData.Id+"'>"+ s +"</select></td></tr>"
tbody = tbody.replace('<option value="'+itemData.TypeId+'">', '<option selected="selected" value="'+itemData.TypeId+'">');
});
tbl += tbody+"</table>"
}
else {
window.alert(' error : ' + returndata.message);
}
}