Select2 DropDownList功能在gridview中选择项目后消失

Question

我在gridview 中有一个gridview 和一个下拉列表来选择项目。因为我的项目列表很大，所以我使用 JQuery Select2 插件进行搜索。所以我在站点母版页中添加了引用和初始化代码，并且还首次成功地初始化了 select2 功能。但是，在我选择第一项后，下拉列表变为正常下拉列表并失去所有 select2 功能。

我在我的 asp.net Web 应用程序中使用 AdminLTE 3 模板的 select2 插件，并将 sql 作为数据库。

母版页中的引用和初始化代码：

<link rel="stylesheet" href="plugins/select2/select2.min.css"/>
<script src="plugins/select2/select2.full.min.js"></script>
    <script>
  $(function () {
    //Initialize Select2 Elements
    $('.select2').select2()
  })
</script>

下拉列表：

<asp:TemplateField HeaderText="Item Name" ItemStyle-Wrap="false" ControlStyle-Width="250px" HeaderStyle-Wrap="false">
   <ItemTemplate>
      <asp:DropDownList ID="drpItemname" runat="server" Width="200px" CssClass="form-control select2" OnSelectedIndexChanged="GetItemDetails" AutoPostBack="true"></asp:DropDownList>
   </ItemTemplate>
   <HeaderStyle Wrap="False" />
   <ItemStyle Wrap="False" />
</asp:TemplateField>

第一页加载后的屏幕截图：

选择项目后的屏幕截图：

Answer 1

您只需要添加此代码

<script>
$(function () {
                $(".select2").select2();
            });
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            $(function () {
                $(".select2").select2();
            });
        });
    }
</script>

当 UpdatePanel 完成加载时触发 prm.add_endRequest。