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

我想出了自己的想法。對於任何有類似問題的人來說，這是因爲每次有部分回發時，multiselect小部件都會將自己附加到body上。爲了解決這個問題，我刪除從DOM菜單，然後reinitalized它：

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