Jquery dynamic load dropdownlist

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];