jQuery MultiSelect Widget在ASP.NET UpdatePanel中无法正常工作

Question

我在我的网页中使用jQuery Multiselect作为几个下拉列表.它工作正常,但是,我的一个下拉列表在UpdatePanel内部并且它进行回发.回发是必要的,因为第二个下拉列表中的数据是根据用户在第一个下拉列表中选择的内容填充的.

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

这似乎是一个已知的错误,但链接中讨论的解决方案似乎并没有解决我的问题.这是我正在使用的一些代码:

...
<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
    });
});