JQuery从服务器端取得数据绑定到dropdownlist（select）中
aspx.cs页面代码 ：
[WebMethod] ///绑定部门 public static string GetDept() { string ReturnValue = string.Empty; string SqlGet = "select XXID,XXName from TableXX"; DataTable dt = DbHelperSQL.Query(SqlGet).Tables[0]; ReturnValue = JsonHandle.DataTable2Json(dt); return ReturnValue; }
其中jsonHandle.DataTable2Json是将DataTable转化为json对象
代码如下：
#region dataTable转换成Json格式 /// <summary> /// dataTable转换成Json格式 /// </summary> /// <param name="dt"></param> /// <returns></returns> public static string DataTable2Json(DataTable dt) { StringBuilder jsonBuilder = new StringBuilder(); jsonBuilder.Append("{/""); jsonBuilder.Append(dt.TableName.ToString()); jsonBuilder.Append("/":["); for (int i = 0; i < dt.Rows.Count; i++) { jsonBuilder.Append("{"); for (int j = 0; j < dt.Columns.Count; j++) { jsonBuilder.Append("/""); jsonBuilder.Append(dt.Columns[j].ColumnName); jsonBuilder.Append("/":/""); jsonBuilder.Append(dt.Rows[i][j].ToString()); jsonBuilder.Append("/","); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("},"); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("]"); jsonBuilder.Append("}"); return jsonBuilder.ToString(); } #endregion dataTable转换成Json格式
aspx页面代码：
<select id="BindRop" ></select>
js脚本：
//获取相应方法的drop数据 function GetDropData(BoolAsync, ControlName,PageName, FunName, ValueName, TextName) { var GetDropData = ""; $.ajax({ type: "POST", contentType: "application/json", url: PageName+".aspx/" + FunName, data: "{}", async: BoolAsync, dataType: 'json', success: function (result) { var json = eval("(" + result.d + ")"); $.each(json.ds, function (i) { $("<option></option>").val(json.ds[i][ValueName]).html(json.ds[i][TextName]).appendTo(ControlName); }); }, error: function (result) { alert("错误！"); } }); }
解释：
BoolAsync 是否是异步（异步：true，同步：false）
ControlName 页面上select控件的ID
PageName 服务器上代码位置如：Default.aspx.cs下的方法，则填写Default
FunName 服务器上取得数据的方法名称
ValueName绑定时value的字段的名称
TextName绑定时值的字段名称
js调用方法
GetDropData(false, "#DrpShift", "PageName","GetShift", "XXID", "XXName");