Select2在ASP.Net UserControl中不起作用

Question

我正在使用Select2插件示例 。 它適用於所有頁面，但不適用於用戶控件。 我有一個用戶控件，如下所示：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SearchPage.ascx.cs" Inherits="SIGORTAPRO.WEB.UC.SearchPage" %>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../../../js/select2.js"></script>
<link href="../../../Content/css/select2.css" rel="stylesheet" />

<asp:Panel ID="panel" runat="server" Visible="false">
    <asp:DropDownList ID="ddlSearchDropdownlist" runat="server"></asp:DropDownList>
</asp:Panel>

(function () {
    $("#<%= ddlSearchDropdownlist.ClientID %>").select2();
})();

主頁如下

 <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <uc1:SearchPage runat="server" ID="SearchPage" />
            </ContentTemplate>
</asp:UpdatePanel>

如果我加載頁面，則沒有任何錯誤，但是Select2無法正常工作。 該面板是隱藏的，但是如果我加載頁面，則使它可見。 我想念什么？

Answer 1

Visible="false"表示結果的<div>及其內容未呈現（即，瀏覽器實際上不了解它們，因為它們不會出現在瀏覽器接收的HTML中）。

如果您希望隱藏它，但仍在處理代碼的地方，請使用style="display:none;" 或適當的類別定義。

例如...

<asp:Panel ID="panel" runat="server" style="display:none;">
    <asp:DropDownList ID="ddlSearchDropdownlist" runat="server"></asp:DropDownList>
</asp:Panel>

要么...

<style type="text/css">
  .myHiddenPanel {
    display: none;
  }
</style>
<asp:Panel ID="panel" runat="server" CssClass="myHiddenPanel">
    <asp:DropDownList ID="ddlSearchDropdownlist" runat="server"></asp:DropDownList>
</asp:Panel>