jQuery MultiSelect Widget 在 ASP.NET UpdatePanel 中不起作用

我在我的网页中将 jQuery Multiselect 用于几个下拉列表。它工作正常，但是，我的下拉列表之一位于 UpdatePanel 内，并且它执行回发。回发是必要的，因为第二个下拉列表中的数据是根据用户在第一个下拉列表中选择的内容填充的。

回发后，jQuery Multiselect 似乎不再允许我从下拉列表中选择任何内容。如果下降，但我无法点击任何东西。

这似乎是 known bug ，但链接中讨论的解决方案似乎无法解决我的问题。这是我正在使用的一些代码:

...
<div style="margin-left: 23px">
    <asp:UpdatePanel runat="server" ID="pnlAdvertiserReportsAdvertiserByHostSitesHostCities">
        <ContentTemplate>
            <div style="display: inline-table"><asp:DropDownList runat="server" ID="ddlAdvertiserReportsAdvertiserByHostSitesStates" AutoPostBack="True" OnSelectedIndexChanged="ddlAdvertiserReportsAdvertiserByHostSitesStates_SelectedIndexChanged"></asp:DropDownList></div>
            <div style="display: inline-table"><asp:DropDownList runat="server" ID="ddlAdvertiserReportsAdvertiserByHostSitesCities"></asp:DropDownList></div>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>
...
...
<script type="text/javascript">
        $('#<%= ddlAdvertiserReportsAdvertiserByHostSitesStates.ClientID %>').multiselect({
            multiple: false,
            header: false,
            noneSelectedText: false,
            selectedList: 1,
            minWidth: 170
        });

        $('#<%= ddlAdvertiserReportsAdvertiserByHostSitesCities.ClientID %>').multiselect({
            multiple: false,
            header: false,
            noneSelectedText: false,
            selectedList: 1,
            minWidth: 170
        });
...
...
    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {
        $('#<%= ddlAdvertiserReportsAdvertiserByHostSitesStates.ClientID %>').multiselect({
            multiple: false,
            header: false,
            noneSelectedText: false,
            selectedList: 1,
            minWidth: 170
        });

        $('#<%= ddlAdvertiserReportsAdvertiserByHostSitesCities.ClientID %>').multiselect({
            multiple: false,
            header: false,
            noneSelectedText: false,
            selectedList: 1,
            minWidth: 170
        });
    });

</script>

如果有人对此有任何建议或解决方案，我将不胜感激!

最佳答案

这是我自己想出来的。对于遇到类似问题的任何其他人，这是因为每次有部分回发时，多选小部件都会将自身附加到正文中。为了解决这个问题，我从 DOM 中删除了菜单，然后重新初始化它:

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function () {
    $('.ui-multiselect-menu').each(function() {
        $(this).remove();
    });
    $('#<%= ddlAdvertiserReportsAdvertiserByHostSitesStates.ClientID %>').multiselect({
        multiple: false,
        header: false,
        noneSelectedText: false,
        selectedList: 1,
        minWidth: 170
    });

    $('#<%= ddlAdvertiserReportsAdvertiserByHostSitesCities.ClientID %>').multiselect({
        multiple: false,
        header: false,
        noneSelectedText: false,
        selectedList: 1,
        minWidth: 170
    });
});

关于jQuery MultiSelect Widget 在 ASP.NET UpdatePanel 中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21064641/