JQuery Multiselect 不适用于 Ajax 调用答案

【问题标题】：JQuery Multiselect not working with Ajax callJQuery Multiselect 不适用于 Ajax 调用
【发布时间】：2019-06-16 11:58:41
【问题描述】：

在我的 ASP.net Web 应用程序中，我使用的是 JQuery 多选择器。为了在此处填充列表框，我使用了 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>

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

当前行为

预期行为

【问题讨论】：

标签： javascript jquery asp.net-ajax

【解决方案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");
}

【讨论】：

大卫我还有另一个问题。如何通过 ajax 调用将 选定的值 id 传递给服务器。我该怎么做
@thomsan：可以用$("[id*=ddlPlot]").val()获取<select>的值，应该是一个字符串数组。要将其添加到您的 $.ajax() 调用中，您可以在 AJAX 选项中使用 data 参数：api.jquery.com/jquery.ajax

【解决方案2】：

我也遇到了同样的问题。解决办法是：

在您的 ajax 响应中，您需要调用另一个 javascript 函数来加载 jquery 选择脚本和 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);
         }
         });
   }

【讨论】：