To fill a ComboBox (ajaxToolkit) from an Ajax WebMethod

Question

On my ASPX page I have the following ComboBox that should be filled from an Ajax WebMethod.

<ajaxToolkit:ComboBox ID ="cbMembers" runat="server"></ajaxToolkit:ComboBox>

The WebMethod that fills the ComboBox is called as follows:

$.ajax({
        type: "POST",
        url: functions.aspx/members",
        data: "{SearchInput: '" + SearchInput + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {                
            var cbMembers = $("[id*=cbMembers]");
            $.each(r.d, function () {
                cbMembers.append( -- My problem is here -- );
            })                
        }
    });

WebMethod

List<ListItem> members = new List<ListItem>();
...
if (Reader.HasRows)
            { 
                while (Reader.Read())
                {
                    members.Add(new ListItem
                    {
                        Value = HttpUtility.HtmlEncode((string)(Reader["name"])),
                        Text = HttpUtility.HtmlEncode((string)(Reader["name"]))
                    });
                } 
            }
            return members;
...

The data is retrieved correctly from the WebMethod. I tested it. But my problem is to fill the list items in the ComboBox. Any advice?

 success: function (r) {                
            var cbMembers = $("[id*=cbMembers]");
            $.each(r.d, function () {
                cbMembers.append( -- How to append the data here? --);
            })

        }

Answer 1

Try this

$.each(r.d, function () {
cbMembers.append($("<option>",{value:"1",text:"Gloria"}));
})

Answer 2

Try this

        $.each(r.d, function () {
            cbMembers.append($("<option></option>").val(this['Value']).html(this['Text']));
        }