清除下拉菜单 Select2 从 JSP / Ajax 填充一个按钮只能工作一次

Question

我有一个要查询数据库的页面，应用了 12 个过滤器（每个过滤器对应一个 select2 个下拉列表）。

当页面加载时，selects 默认填充来自 java 控制器的数据。

来自 jsp 页面的示例：

<select id="selectFPA" name="selectFPA" form="formResult" class="form-control">
    <option selected>All the results</option>
    <c:forEach items="${fpaList}" var="fpaList">
        <option><c:out value="${fpaList.fpaname}" /></option>
    </c:forEach>
</select>

但是，如果用户 select 在任何过滤器中输入任何值，所有过滤器都会根据所选 selection 通过 AJAX 调用进行更新。

例如，假设我们有两个 select 过滤器（下拉列表）：

Select 1（动物组）： - 鸟类 - 哺乳动物

Select 2（动物名）： - 鹦鹉 - 狗

如果用户选择哺乳动物，将调用一个 AJAX 函数来查询数据库并更新 select 2 的内容，从而消除 Parrot 选项。（以此类推，最多 12 个过滤器）。

当我想清除应用的过滤器和 return 到原始 select 内容（每次从 [=55= 加载页面时默认显示的内容）时，问题就来了]控制器）。

我已经尝试了很多东西，从类似的 Whosebug 问题中都没有成功。

我最后尝试的是：

将select的初始内容保存在一个变量中：

const fpa = $("#selectFPA").find("option").clone();
Onclick 事件（重置过滤器按钮）

        $("#ResetFilters").on("click",function() {
            //first we empty the content  
            $('#selectFPA').empty().trigger('change.select2');
            //original value injection
            $("#selectFPA").html(fpa),
            $('#selectFPA').trigger('change.select2')
        })

如果我按一次按钮，效果很好，如果我再按一次按钮，默认情况下 selects 随机 select 不同的值，它们表现得很奇怪。

我知道这是一个非常具体的问题，但有人可以帮助我吗？我做错了什么？

谢谢。

Answer 1

我认为根据 this 的回答，你不能在 jquery 中创建常量，这就是它第一次工作而下一次不工作的原因。或者，解决方案可能是分配 clone 值到某些 div 并在低于 needed.Like 时随时获取它：

//call when page loads for the first time
$(document).ready(function() {
  //cloning
  var fpa = $("#selectFPA").find("option").clone();
  //assigning value to div
  $("#abc").html(fpa);


  $("#ResetFilters").on("click", function() {

    //getting clone value from div
    var c = $("#abc").find("option").clone();
    //first we empty the content  
    // $('#selectFPA').empty().trigger('change.select2');
    //original value injection
    $("#selectFPA").html(c);
    //$('#selectFPA').trigger('change.select2')
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectFPA" name="selectFPA" form="formResult" class="form-control">
  <option selected>All the results</option>
  <option>1</option>
  <option>2</option>

</select>

<button id="ResetFilters">Reset</button>
<div id="abc" style="display:none"></div>

清除下拉菜单 Select2 从 JSP / Ajax 填充一个按钮只能工作一次

Clear dropdown Select2 populated from JSP / Ajax with a button only works once

javascript

ajax

jsp

jquery-select2