Come compilare un DropDown utilizzando Jquery Ajax Call?

Question

Ho un WebMethod che ottiene i dati che voglio compilare con DropDown in un DataSet. Attualmente sto riempiendo il menu a discesa usando un oggetto hardcoded. Ma voglio sostituire questo oggetto hard coded con i dati restituiti da webmethod.

[System.Web.Services.WebMethod] 
     public static string GetDropDownDataWM(string name) 
     { 
      //return "Hello " + name + Environment.NewLine + "The Current Time is: " 
      // + DateTime.Now.ToString(); 

      var msg = "arbaaz"; 

      string[] name1 = new string[1]; 
      string[] Value = new string[1]; 
      name1[0] = "@Empcode"; 
      Value[0] = HttpContext.Current.Session["LoginUser"].ToString().Trim(); 
      DataSet ds = new DataSet(); 
      dboperation dbo = new dboperation(); 
      ds = dbo.executeProcedure("GetDropDownsForVendor", name1, Value, 1); 

      return ds.GetXml(); 

     } 

lato client (UPDATE 1):

<script type = "text/javascript"> 
    function GetDropDownData() { 
     var myDropDownList = $('.myDropDownLisTId'); 

     $.ajax({ 
      type: "POST", 
      url: "test.aspx/GetDropDownDataWM", 
      data: '{name: "abc" }', 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (data) { 
       $.each(jQuery.parseJSON(data.d), function() { 
        myDropDownList.append($("<option></option>").val(this['FieldDescription']).html(this['FieldCode'])); 
       }); 
      }, 
      failure: function (response) { 
       alert(response.d); 
      } 
     }); 
    } 
    function OnSuccess(response) { 
     console.log(response.d); 
     alert(response.d); 
    } 
</script> 

Answer 1

function GetDropDownData() { 
    $.ajax({ 
     type: "POST", 
     url: "test.aspx/GetDropDownDataWM", 
     data: '{name: "abc" }', 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(data.d) 
       { 
        $.each(data.d, function(){ 
         $(".myDropDownLisTId").append($("<option  />").val(this.KeyName).text(this.ValueName)); 
        }); 
       }, 
     failure: function() { 
      alert("Failed!"); 
     } 
    }); 
} 

Answer 2

Dal WebMethod, non inviare DataSet direttamente, inviare XML ...

[System.Web.Services.WebMethod] 
public static string GetDropDownDataWM(string name) 
{ 
    DataSet ds = new DataSet(); 
    ds.Tables.Add("Table0"); 
    ds.Tables[0].Columns.Add("OptionValue"); 
    ds.Tables[0].Columns.Add("OptionText"); 
    ds.Tables[0].Rows.Add("0", "test 0"); 
    ds.Tables[0].Rows.Add("1", "test 1"); 
    ds.Tables[0].Rows.Add("2", "test 2"); 
    ds.Tables[0].Rows.Add("3", "test 3"); 
    ds.Tables[0].Rows.Add("4", "test 4"); 

    return ds.GetXml(); 
} 

Prima Ajax chiama ...

var myDropDownList = $('.myDropDownLisTId'); 

Try come qui di seguito ... (all'interno Ajax chiamata)

success: function (response) { 
    debugger; 

    $(response.d).find('Table0').each(function() { 
      var OptionValue = $(this).find('OptionValue').text(); 
      var OptionText = $(this).find('OptionText').text(); 
      var option = $("<option>" + OptionText + "</option>"); 
      option.attr("value", OptionValue); 

      myDropDownList.append(option); 
    }); 
}, 

Nota:

1. OptionValue e OptionText sono le colonne della tabella DataSet.

2. $(response.d).find('Table0').each(function(){}) - Qui Table0 è il nome della tabella all'interno DataSet.

Answer 3

var theDropDown = document.getElementById("myDropDownLisTId"); 
       theDropDown.length = 0; 
       $.each(items, function (key, value) { 

        $("#myDropDownLisTId").append($("<option></option>").val(value.PKId).html(value.SubDesc)); 

qui "SubDesc", pkId descrive il valore uscire Database., U bisogno di separare il valore dal set di dati.