I have a list of objects services in my thymeleaf context, and I have the following at my page:

<select id="inputService" name="idService" size="1">
    <option th:each="service : ${services}" th:text="${service.name}" th:value="${service.idService}"/>
</select>
<p id="selectedServiceLimits"></p>

Each object from services contains fields minAmount and maxAmount. How can I print into my p element the these two fields of the selected service in select by javascript? And how can I print these two fields of the option that is selected when document is ready?

Thanks!

I have a list of objects services in my thymeleaf context, and I have the following at my page:

<select id="inputService" name="idService" size="1">
    <option th:each="service : ${services}" th:text="${service.name}" th:value="${service.idService}"/>
</select>
<p id="selectedServiceLimits"></p>

Each object from services contains fields minAmount and maxAmount. How can I print into my p element the these two fields of the selected service in select by javascript? And how can I print these two fields of the option that is selected when document is ready?

Thanks!

• java
• javascript
• jquery
• html
• thymeleaf

1 Answer 1

<script th:inline="javascript">
            /*<![CDATA[*/
            function showLimits() {
                var services = /*[[${services}]]*/ null;
                var selectedIndex = $("#inputService option:selected").index();
                var service = services[selectedIndex];
                $("#amountLimits").text("Мин. сумма: " + service.amountMin + ", макс. сумма: " + service.amountMax);
            }
            $(function() { showLimits(); });
            /*]]>*/
</script>

<select id="inputService" name="idService" size="1" onChange="showLimits()">

That's the solution