jQuery MultiSelect 小部件在 ASP.NET UpdatePanel 中不起作用

Question

我在我的网页中使用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>

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

Answer 1

这是我自己想出来的。对于其他有类似问题的人，这是因为每次有部分回发时，多选小部件都会不断地将自己附加到正文中。为了解决这个问题，我从 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
    });
});