Question

在我的ASP.net Web应用程序中，我正在使用JQuery Multi-selector。要在此处填充列表框，我使用了Ajax调用。

示例JSON字符串

[{"UserId":10004,"FullName":"Wayne Pala"},{"UserId":10025,"FullName":"Danyel Pickering"},{"UserId":10027,"FullName":"Jina Sherlock"}]

我的部分代码如下，

<div class="col col-lg-12 col-md-12 col-sm-12 form-group">
    <div class="col-lg-5 col-md-6 col-sm-6 text-left">
        <asp:Label ID="Label1" Text="Users" runat="server" />
    </div>
    <div class="col-lg-7 col-md-6 col-sm-6 text-left">
        <asp:ListBox ID="ddlPlot" runat="server" Width="92%" TabIndex="6" ClientIDMode="Static"></asp:ListBox>
        <asp:HiddenField ID="HiddenField1" runat="server" ClientIDMode="Static" />
    </div>
</div>

<script type="text/javascript" src="../Scripts/jquery.multiSelect.js"></script>
<script src="../Scripts/Common/kendo.custom.min.js"></script>
<link href="../Stylesheets/jquery.multiSelect.css" rel="stylesheet" type="text/css" />

<script>
    $(document).ready(function () {
        GetServicesList();
        createMultiSelectfor("Select Users...", "ddlPlot");
    });

    function GetServicesList() {
        "use strict";
        $.ajax({
            type: "POST",
            url: SERVER_PATH + '/LTSService/LTSService.asmx/GetAllUserData',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: UserComplete
        });
    }

    function UserComplete(result, status) {
        "use strict";
        var data = jQuery.parseJSON(result.d);
        var lstsupervisor = $("[id*=ddlPlot]");
        lstsupervisor.empty();
        $.each(data, function () {
            lstsupervisor.append($("<option></option>").val(this['UserId']).html(this['FullName']));
        });
    }

    function createMultiSelectfor(placeholderText, listboxID) {
        $("#" + listboxID).multiSelect(
            {
                noneSelected: placeholderText,
                selectAll: true,
                oneOrMoreSelected: '*'
            }
        );
    }
</script>

值正确绑定到列表框。但是多选功能无法正常工作。

当前行为

预期的行为

Answer 1

因为您要在填充选择列表之前初始化jQuery插件：

// This is an asynchronous operation:
GetServicesList();

// So this will start before the above has completed:
createMultiSelectfor("Select Users...", "ddlPlot");

相反，请在您的AJAX回调中初始化插件，以便它在填充元素后发生：

function UserComplete(result, status) {
    // the code you have already in this function
    // then...
    createMultiSelectfor("Select Users...", "ddlPlot");
}

jQuery Multiselect不适用于Ajax调用

1 个答案: