Question

我遇到有关动态加载下拉列表的问题。我对我的ashx进行了调试，它确实发布了数据。但是下拉列表没有价值。

这是我的Aspx页面

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

在html中有一个下拉列表。

<asp:DropDownList ID="ddlClassId" runat="server" AutoPostBack="True">
                    </asp:DropDownList>

这是我的ashx代码：

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

看看这一行：var data = data[i]; 它应该是var data = datas[i];

Answer 2

在你的代码中，for循环中存在拼写错误，并且由于下拉列表是服务器控件，因此其id可能会更改，因此除非使用控件的id，否则不应使用ClientID选择器。我使用$.each循环简化了你的代码。看看。

   $(function() {
       $.post("ContentLoad.ashx", function(datas) {
           var $ddl = $("select[id*=ddlClassId]");
           $.each(datas, function(){
             $ddl.append("<option value='"+this.Id  + "'>" +this.Title + "</option");
           });
        },"json");
    });

Jquery动态加载下拉列表

2 个答案: