Is it possible to return a list<string> from a webmethod and pass the return value to bind a html select using jquery?

Im trying to bind an html select and i wrote a webmethod for that, which returns a list. How can i use this return value to bind my select control using jquery.... ? I'm stuck... The code is appended herewith :

function columnDropdownScript() {
  var reqTableNameParameter = "Designation";  //$('#ddlTableNames').text;
  var requestTableParameters = '{' +
                        'selTableName:"' + reqTableNameParameter + '"}';
  // Configure AJAX call to server                        
  $.ajax({
    type: "POST",
    url: "Webtop.aspx/FillColumnDropdown",
    data: requestTableParameters,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: DisplayColumnNames, //Event that'll be fired on Success
    error: DisplayError //Event that'll be fired on Error
  });

}
function DisplayColumnNames(serverResponse) {

  $("#ddlColumnNames").get(0).options.length = 0;
  $("#ddlColumnNames").get(0).options[0] = new Option("Select", "-1");
  $.each(serverResponse.d, function(index, item) {
    $("#ddlColumnNames").get(0).options[$("#ddlColumnNames").get(0).options.length] = new Option(item.Display, item.Value);
  });
  alert('Check Column DropDown');
}




 [WebMethod]
    public static List<string> FillColumnDropdown(string selTableName)
    {
        int x=1;
        string selectedTable = selTableName;
        List<string> columnsToBind = new List<string>();
        forea开发者_JAVA百科ch (Columns column in Metadata.columnsOfSelectedTables)
        {
            if (column.TableName.Equals(selectedTable))
            {
                columnsToBind.Add(column.ColumnName);
            }
        }
       return columnsToBind;
    }

// I haven't tested this, but off the top of my head, this should do the trick // (note, this is appending to the list. you may need to clear if called multiple times)

$.ajax({
    type: "POST",
    url: "Webtop.aspx/FillColumnDropdown",
    data: requestTableParameters,
    //contentType: "plain/text",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
        for (var i = 0, l = msg.length; i < l; i++) {
            $("#the_selectbox").append("<option>" + msg.d[i] + "</option>");
        }
    },
    error: DisplayError //Event that'll be fired on Error
  });

Just for curiosity, why did you do a web method for that instead of adding it onload / postback trigger?

And where are you casting your list to json in code behind? Wouldn't it's return type be xml?

Anyway, jQuery objects properties ask for anonymous functions:

$.ajax({
    // ...
    success:function(serverResponse){
        //success code
    },
    error:function(serverResponse){
        //error code
    },
});