Jquery dynamic load dropdownlist - ajax

Question

I have a problem about dynamic load dropdownlist. I debuged my ashx, it do post the data. But dropdownlist have no value.
Here is my Aspx page
<script type="text/javascript">
$(function() {
$.post("ContentLoad.ashx", function(datas) {
for(var i = 0; i < datas.length; i++) {
var data = datas[i];
var option = $("<option value='"+data.Id + "'>" +data.Title + "</option");
$("#ddlClassId").append(option);
}
},"json");
});
</script>
In the html have a dropdownlist.
<asp:DropDownList ID="ddlClassId" runat="server" AutoPostBack="True">
</asp:DropDownList>
And here is my ashx code:
public class ContentLoad : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
BLL.ChannelManeger bll = new BLL.ChannelManeger();
DataTable dt = bll.GetList(0, 0);
Data[] datas = new Data[dt.Rows.Count];
int i = 0;
foreach (DataRow dr in dt.Rows)
{
string id = dr["Id"].ToString();
int ClassLayer = int.Parse(dr["ClassLayer"].ToString());
string title = dr["Title"].ToString().Trim();
if (ClassLayer == 1)
{
datas[i++] = new Data() { Id = Convert.ToInt32(id), Title = title };
}
else
{
title = "├ " + title;
title = StringOfChar(ClassLayer - 1, "　") + title;
datas[i++] = new Data() { Id = Convert.ToInt32(id), Title = title };
}
}
JavaScriptSerializer serializer = new JavaScriptSerializer();
context.Response.Write(serializer.Serialize(datas));
}
public static string StringOfChar(int strLong, string str)
{
string ReturnStr = "";
for (int i = 0; i < strLong; i++)
{
ReturnStr += str;
}
return ReturnStr;
}
public bool IsReusable
{
get
{
return false;
}
}
}
class Data
{
public int Id { get; set; }
public string Title { get; set; }
}

Answer 1

In your code there was a typo inside for loop and also since dropdown list is a server control, its id might change so you should not use id selector unless you use ClientID of the control. I have simplied your code using $.each loop take a look.
$(function() {
$.post("ContentLoad.ashx", function(datas) {
var $ddl = $("select[id*=ddlClassId]");
$.each(datas, function(){
$ddl.append("<option value='"+this.Id + "'>" +this.Title + "</option");
});
},"json");
});

Answer 2

look at this line: var data = data[i];
it should be var data = datas[i];