jQuery / Select2初始化问题

Question

寻求jQuery初始化问题的一些帮助。

我的页面上有一个HTML Select控件，如下所示;

<select class="ItemFilter" name="filters[]" multiple="multiple">
<optgroup label="Fruit">
    <option value="Apple">Apple</option>
    <option value="Banana">Banana</option>
    <option value="Orange">Orange</option>
</optgroup>
<optgroup label="Vegetable">
    <option value="Avocado">Avocado</option>
    <option value="Lettuce">Lettuc</option>
</optgroup>

我的Select2的jQuery如下所示，加载页面时加载完全正常。 它格式正确，工作得很好。

$(document).ready(function () {
    $('.ItemFilter').select2({
        placeholder: "Select some filters to apply..",
    });
});

我遇到的问题：当我单击页面上其他位置的另一个按钮更新数据库时，Select控件会丢失它的'Select2'连接，这意味着它将恢复为没有Select2格式和功能的标准Select控件。 值得注意的是，我正在更新一些细节的页面区域包含在UpdatePanel（UpdateMode- Always）中。

关于我可以做些什么来解决这个问题的任何指示或想法？ 非常感激！

Answer 1

触发UpdatePanel并刷新（称为部分回发 ）时，它会重新呈现其所有内容。 正如您所指出的，这将导致从头开始重新创建元素。

您可以向UpdatePanel添加<script>块，触发部分回发功能，重新启用Select2功能。

这样的事情应该有效：

$(document).ready(function () {
  onUpdatePanelPostback();
});

function onUpdatePanelPostback() {
  $('.ItemFilter').select2({
    placeholder: "Select some filters to apply..",
  });
}

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
  <ContentTemplate>

    <script>
      Sys.Application.add_load(onUpdatePanelPostback);
    </script>

    <select class="ItemFilter" name="filters[]" multiple="multiple"> 
      ... 
    </select>

  </ContentTemplate>
</asp:UpdatePanel>