我可以在另一个代码块中使用th:each中的可变慈善机构吗?例如
<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>
答案 0 :(得分:1)
否,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));
})
})
答案 1 :(得分: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>