在 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() {&nbsp; opts = $("#SelectWorkshop").find("option").clone()&nbsp; $("#resetBTN").on("click",function() {&nbsp; &nbsp; $("#SelectWorkshop").html(opts)&nbsp; })&nbsp; $("#change").on("click",function() {&nbsp; &nbsp; $("#SelectWorkshop").html(`<option>Please select</option>`)&nbsp; })})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="col-sm">&nbsp; <label style="font-size: 20px;"><fmt:message key="cap.workplace"/>: </label>&nbsp; <select id="SelectWorkshop" class="chosen-select selectFilter">&nbsp; &nbsp; <option selected="selected" value="0">TODO</option>&nbsp; &nbsp; <option value="ID Location 1">ID Location 1</option>&nbsp; &nbsp; <option value="ID Location 1">ID Location 1</option>&nbsp; &nbsp; <option value="ID Location 1">ID Location 1</option>&nbsp; </select></div><button type="button" id="change">change</button><button type="button" id="resetBTN">reset</button>