Binding Dropdownlist using jquery

I am try to bind the dropdowmlist using jquery. But is showing some error.

Code:

                     $.ajax({
                      type: "POST",
                      contentType: "application/json; charset=utf-8",
                      data: "{product: '" + product + "'}",
                      url: "Search.aspx/FetchCategory",
                      dataType: "json",
                      success: function(data) {
                      $.each(data.d, function() {
                              $("#ddlCategory").append($("<option></option>").val(this['ID']).html(this['Category']));
                          });
                      }
 开发者_开发知识库                 });

values in the data: [{"Category":"All","ID":"%"},"Category":"Action,"ID":"4"},"Category":"Race,"ID":"5"},"Category":"Sports,"ID":"6"}]

Error:

$("#ddlCategory").append($("").val(this['ID']).html(this['Category'])); Microsoft JScript runtime error: Object doesn't support this property or method

Geetha

Geetha: It looks like data.d is returning an array which contains objects?

Try implementing success like this:

success: function(data) {
    $.each(data.d[0], function(key,value) {
     $("#ddlCategory").append($("<option></option>").val(key).html(value));
    });
}