JQuery 多选不适用于 Ajax 调用

Question

在我的 ASP.net 网络应用程序中，我使用 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>

值正确绑定到列表框。但是multi-select无法正常工作。

当前行为

预期行为

Answer 1

因为您试图在 初始化 jQuery 插件之前 select 列表已被填充：

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

Answer 2

我也遇到了同样的问题。解决方案是：

在您的 ajax 响应中，您需要调用另一个 javascript 函数来加载 jquery select 脚本 & css，它工作正常。

     jQuery.ajax({
         url: '/link,
         type: "get",
         dataType: "html",
         encode  : true,
         cache: false,
         contentType: false,
         processData: false,
         success: function(data){
            $('#ResultDiv').html(data);
             load_script();
         }
     });

 //use load_script function to load script from another view into your current view    
 function load_script(){

  jQuery.ajax({
         url: '/link,
         type: "get",
         dataType: "html",
         encode  : true,
         cache: false,
         contentType: false,
         processData: false,
         success: function(data){
            $('#ScriptDiv').html(data);
         }
         });
   }

JQuery 多选不适用于 Ajax 调用

JQuery Multiselect not working with Ajax call

javascript

jquery

asp.net-ajax