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

Question

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

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

主页上的参考和初始化代码：

<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>

DropDownList：

<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>

第一页加载后的屏幕截图： https://www.php.net/manual/en/language.types.array.php

选择项目后的屏幕截图：

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>

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