0

I will try to simplify the code.

Basically in my jsp file when the document has been loaded, the select values ​​are filled in automatically.

For example:

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

But depending on what the user does, I will need to modify the original select value for another one, let's say I call a Javascript function that does:

$("#SelectWorkshop").empty();

var tempvalue = "<option>This is a demo for Stackoverflow</option>";

$( "#SelectWorkshop" ).html(tempvalue);

After this code is executed, the previous content of the select is gone and I can see the new content, which is what I want.

But I would like to create a button, called "Reset filters" (for example) to get the 'original' values of the select.

I tried creating a button called ResetFilters and then do this (which is basically injecting the previous content):

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

        });

But it's not working, basically the syntax is not correct, how can I inject html & jstl altogether? I don't know if it's the most correct way to do it.

Does anyone know how to do it in the most efficient way?

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Cheknov
  • 1,892
  • 6
  • 28
  • 55
  • This is likely not a JSP issue. Please create a [mcve] with relevant HTML and JS using the `[<>]` snippet editor – mplungjan Mar 09 '20 at 10:41
  • Hi @mplungjan, thank you. The problem is that if I make an example based solely on html and javascript, then I will not know how to apply it with jstl. Probably the solution that I tried to implement, if it was plain html it would work without major problem, the problem comes when I have to use jstl... – Cheknov Mar 09 '20 at 10:46
  • @mplungjan I removed the jsp tag since it is not a JSP issue. – Cheknov Mar 09 '20 at 10:47
  • JSP/JSTL code runs in webserver not in webbrowser. Rightclick page in webbrowser and do a *View Source* to see what I mean. If you want to run JSP/JSTL code using JavaScript, then you need to send a request to the webserver. One way is using Ajax. – BalusC Mar 09 '20 at 10:49
  • @BalusC I already use Ajax for another tasks, but since the content of the selects are loaded previously when the page loads, I would like to know if there is a way to show the previous values withous using Ajax again. – Cheknov Mar 09 '20 at 10:55

1 Answers1

1

Like this?

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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236