使用按钮清除从JSP/Ajax填充的下拉列表Select2只工作一次

Question

我有一个页面，在其中对数据库进行查询，应用了12个过滤器（每个过滤器对应一个select2下拉菜单）。

当页面加载时，默认情况下将使用来自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>

例如，假设我们有两个选择过滤器（下拉）：

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

选择2（动物名）：-鹦鹉-狗

当我想清除应用的过滤器并返回到原始的select内容（每次从java控制器加载页面时默认出现的内容）时，问题就来了。

我尝试了很多事情，从类似的Stackoverflow问题没有成功。

我最后尝试的是：

>

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

常量fpa=$（“#selectfpa”）.find（“option”）.clone（）；

Onclick事件（Reset filters按钮）

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

如果我按了一次按钮，这工作很好，如果我按了第二次按钮，选择器在默认情况下随机选择不同的值，它们的行为很奇怪。

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

谢谢你。

Answer 1

我认为根据这个答案，您不能在jquery中创建常量，这就是它只在第一次工作而下一次不工作的原因。另外，解决方案可以将clone值分配给某个div并在需要时随时获取它。如下所示：

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