Json來填充雙列表框

我從一個雙列表框控件從http://www.virtuosoft.eu/code/bootstrap-duallistbox/工作，並試圖填充它從JSON請求返回的信息。Json來填充雙列表框

起初我與子頁面加載使用此

$('#MainContent_ddlUnassignedFiles').bootstrapDualListbox(
     { 
      nonSelectedListLabel: 'Non-selected', 
      selectedListLabel: 'Selected', 
      preserveSelectionOnMove: 'moved', 
      moveOnSelect: true 
     });

填充Duallistbox在VB中像這樣

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和回傳能正常工作，填充沒問題。

然而，當我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 \響應

<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沒有被填充，但另一個下拉列表正在頁面上創建，而不是填充正確的控件。

任何和所有的幫助，非常感謝。

來源

2016-07-15 Code Warrior

以下爲我工作：

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

結果：

來源

2016-07-15 09:58:41 bwyn

我得到的第一組結果回沒問題了，但我現在的問題是，如果列表需要改變，它不破壞\重建數據 –

我更新了答案。 select元素以兩個選項（A和B）開始。在ajax回調中，這些選項被替換爲新選項，並且DLB被刷新。 – bwyn

感謝您的回覆，我會盡快再試。 –

Json來填充雙列表框

回答

相關問題