Возьмите переменную из thymeleaf th: каждый

Question

Могу ли я использовать переменную благотворительность из th: каждый в другом блоке кода.Например

 <select class="select-field">
    <option th:each="charity : ${charities}" th:value="${charity.id}" th:text="${charity.name}"></option>
 </select>

<div>
   <p th:text="${'You selected '+ charity.name}">
<div>

Answer 1

В HTML вы можете внести следующие изменения в тег div:

<div class="display-class">
   <p></p>
<div>    

Это поможет идентифицировать конкретный div

Затем вы можете использовать jQuery для отображенияназвание выбранной опции.

<script type="text/javascript">
$('.select-field').on("change", function() {        
    var selectedOption = $(this).find('option:selected').text();
    $div = $('.display-class');
    $p = $div.find('p');
    $p.text("You selected: " + selectedOption);
});
</script>

Answer 2

Нет, Thymeleaf отображается на стороне сервера, поэтому для этого вам нужно будет использовать js или jQuery.Что-то вроде приведенного ниже кода должно сработать.

jQuery

$(document).ready(function() {

    // If you want the option's text.
    $('.select-field').on('change', function() {
        $('p').text("You selected " + $(this).find('option:selected').text()));
    })

    // If you want the option's value.
    $('.select-field').on('change', function() {
        $('p').text("You selected " + $(this).val()));
    })
})

ОБНОВЛЕНИЕ

Если вы хотитедобавьте больше информации от вашего объекта благотворительности к вашим опциям, вы можете использовать th:attr.Так, например, если вам нужно описание и название благотворительной организации, вы можете сделать что-то вроде следующего:

HTML

<select class="select-field">
    <option th:each="charity : ${charities}" th:value="${charity.id}" th:text="${charity.name}" th:attr="data-description=${charity.description}, data-image=${charity.image}"></option>
</select>

Тогда вы можетепросто получите каждое значение атрибута, используя функцию jQuery .attr().

$(document).ready(function() {
    $('.select-field').on('change', function() {
        var selectedOption = $(this).find('option:selected');
        var name = $(selectedOption).text();
        var id = $(selectedOption).val();
        var description = $(selectedOption).attr('data-description');
        var imageName = $(selectedOption).attr('data-image');
        // Find your image by id.
        var image = $('#myImage');

        // Set your new image.
        $(image).attr('src','/img/'+ imageName));
    })
})