在 Javascript 中操作内容后显示以前的 <div> 内容

Question

我会尽量简化代码。基本上在我的jsp文件中，当文档已经加载完毕后，选择值是自动填写的。例如：<div class="col-sm">    <label style="font-size: 20px;"><fmt:message key="cap.workplace"/>: </label>     <select id="SelectWorkshop" class="chosen-select selectFilter">        <option  selected="selected" value="0"><fmt:message key="cap.todos"/></option>        <c:forEach items="${workshopList}" var="workshopList">            <option value="${workshopList.idLocation}"><c:out value="${workshopList.location}" /></option>        </c:forEach>    </select></div>但是根据用户的操作，我需要修改另一个选择值的原始值，假设我调用了一个 Javascript 函数：$("#SelectWorkshop").empty();var tempvalue = "<option>This is a demo for Stackoverflow</option>";$( "#SelectWorkshop" ).html(tempvalue);这段代码执行后，之前select的内容没有了，可以看到新的内容了，就是我想要的。但我想创建一个按钮，称为“重置过滤器”（例如）来获取选择的“原始”值。我尝试创建一个名为 ResetFilters 的按钮，然后执行此操作（基本上是注入以前的内容）：        $("#ResetFilters").click(function(){            $("#SelectWorkshop").replaceWith(<option  selected="selected" value="0"><fmt:message key="cap.todos"/></option>        <c:forEach items="${workshopList}" var="workshopList">            <option value="${workshopList.idLocation}"><c:out value="${workshopList.location}" /></option>        </c:forEach>);        });但它不起作用，基本上语法不正确，我怎样才能完全注入html & jstl？我不知道这是否是最正确的方法。有谁知道如何以最有效的方式做到这一点？

Answer 1

像这样？

let opts;

$(function() {

  opts = $("#SelectWorkshop").find("option").clone()

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

    $("#SelectWorkshop").html(opts)

  })

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

    $("#SelectWorkshop").html(`<option>Please select</option>`)

  })

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-sm">

  <label style="font-size: 20px;"><fmt:message key="cap.workplace"/>: </label>

  <select id="SelectWorkshop" class="chosen-select selectFilter">

    <option selected="selected" value="0">TODO</option>

    <option value="ID Location 1">ID Location 1</option>

    <option value="ID Location 1">ID Location 1</option>

    <option value="ID Location 1">ID Location 1</option>

  </select>

</div>

<button type="button" id="change">change</button>

<button type="button" id="resetBTN">reset</button>