如何使用Jquery Ajax调用填充DropDown？

我有一个WebMethod，它获取我想在DataSet中填充DropDown的数据。 目前我正在使用硬编码对象填充下拉列表。 但我想用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(); } 

客户端（更新1）：

   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($("").val(this['FieldDescription']).html(this['FieldCode'])); }); }, failure: function (response) { alert(response.d); } }); } function OnSuccess(response) { console.log(response.d); alert(response.d); }  

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($("").val(this.KeyName).text(this.ValueName)); }); }, failure: function () { alert("Failed!"); } }); } 

Answer 2

从WebMethod ，不要直接发送DataSet ，发送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(); } 

在Ajax调用之前……

 var myDropDownList = $('.myDropDownLisTId'); 

尝试如下……（在Ajax调用中）

 success: function (response) { debugger; $(response.d).find('Table0').each(function () { var OptionValue = $(this).find('OptionValue').text(); var OptionText = $(this).find('OptionText').text(); var option = $("" + OptionText + ""); option.attr("value", OptionValue); myDropDownList.append(option); }); }, 

注意：

1. OptionValue和OptionText是DataSet表的列。

2. $(response.d).find('Table0').each(function (){}) – 这里Table0是DataSet中Table的名称。

Answer 3

  var theDropDown = document.getElementById("myDropDownLisTId"); theDropDown.length = 0; $.each(items, function (key, value) { $("#myDropDownLisTId").append($("").val(value.PKId).html(value.SubDesc)); 

这里的“SubDesc”，PKId描述了从数据库中获取的值。你需要将你的值与数据集分开。