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");