我正在使用http://www.virtuosoft.eu/code/bootstrap-duallistbox/中的双重列表框控件,并尝试使用从JSON请求返回的信息填充该列表框。
最初,我在VB中用这样的子填充了Duallistbox
Public Shared Sub GenerateDropDownListAndValues(dt As DataTable, ddl As DropDownList, addSelect As Boolean)
ddl.DataSource = dt
ddl.DataTextField = dt.Columns(1).ToString()
ddl.DataValueField = dt.Columns(0).ToString()
ddl.DataBind()
If addSelect = True Then
ddl.Items.Insert(0, New ListItem("Please select"))
End If
End Sub
然后使用JQuery
$('#MainContent_ddlUnassignedFiles').bootstrapDualListbox(
{
nonSelectedListLabel: 'Non-selected',
selectedListLabel: 'Selected',
preserveSelectionOnMove: 'moved',
moveOnSelect: true
});
在页面加载和回发时可以正常工作,不会出现任何问题。
但是,当我用ajax填充DLB时,我什么也得不到
这是阿贾克斯
$.ajax({
type: "POST",
url: "Assignments.aspx/GetIncompleteSpreadsheets",
data: JSON.stringify(params),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#MainContent_ddlUnassignedFiles").select2("destroy");
var ddlUnassignedFiles = $("#MainContent_ddlUnassignedFiles");
ddlUnassignedFiles.empty();
$.each(data.d, function () {
ddlUnassignedFiles.append($("<option></option>").val(this['Value']).html(this['Text']));
});
$("#MainContent_ddlUnassignedFiles").select2();
$("#saveModal").modal("hide");
},
error: function (data) {
console.log("error :" + data);
console.log(data);
$("#saveModal").modal("hide");
}
});
这是提供json \ response的调用
<Script.Services.ScriptMethod(), Services.WebMethod()> _
Public Shared Function GetIncompleteSpreadsheets(val As Integer) As List(Of ListItem)
Dim listOfParam As New List(Of SqlParameter)
Dim userIdParam As New SqlParameter("@UserId", SqlDbType.VarChar)
userIdParam.Value = GetUserId()
listOfParam.Add(userIdParam)
Dim groupParam As New SqlParameter("@GroupId", SqlDbType.Int)
groupParam.Value = val
listOfParam.Add(groupParam)
Dim dt = GetDataAsDatatable(listOfParam, ConnStr, "App.usp_GetAssignedLists")
Dim retVal = (From row As Object In dt.Rows Select New ListItem() With {
.Value = row("RequestHeaderId"),
.Text = row("FileName")}).ToList()
Return retVal
End Function
我在这里的问题是,使用相同的代码填充另一个下拉列表时,此方法非常有效。但是我遇到的问题是未填充DLB,而是在页面上创建了另一个下拉列表,并且没有填充正确的控件。
任何帮助都将不胜感激。
以下为我工作:
HTML:更新
<select id="test">
<option>A</option>
<option>B</option>
</select>
JS:更新
$("#test").bootstrapDualListbox();
$.getJSON("/api/Home/").success(function (array) {
$("#test").children().remove();
$.each(array, function () {
$('<option>').text(this).appendTo("#test");
})
$("#test").bootstrapDualListbox('refresh', true);
})
我的控制器方法(C#):
public List<int> Get()
{
return new List<int>{1,2,3,4};
}
结果:
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句