Json 填充 Dual ListBox

Question

我正在使用来自http://www.virtuosoft.eu/code/bootstrap-duallistbox/ 的双列表框控件，并尝试使用从 JSON 请求返回的信息填充它。

最初我在 VB 中使用 sub 填充 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

 $.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 \响应的调用

    <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 没有被填充，但是在页面上创建了另一个下拉列表并且没有填充正确的控件。

非常感谢任何和所有的帮助。

Answer 1

以下内容对我有用：

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};
}

结果：