如何使用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); }
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!"); } }); }
从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 = $(""); option.attr("value", OptionValue); myDropDownList.append(option); }); },
注意:
-
OptionValue
和OptionText
是DataSet
表的列。 -
$(response.d).find('Table0').each(function (){})
– 这里Table0
是DataSet
中Table的名称。
var theDropDown = document.getElementById("myDropDownLisTId"); theDropDown.length = 0; $.each(items, function (key, value) { $("#myDropDownLisTId").append($("").val(value.PKId).html(value.SubDesc));
这里的“SubDesc”,PKId描述了从数据库中获取的值。你需要将你的值与数据集分开。