javascript - 在 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 的按钮，然后执行此操作(基本上是注入(inject)以前的内容):

        $("#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>);

        });

但是它不起作用，基本上语法不正确，我怎样才能同时注入(inject)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>