如何在 Thymeleaf 中显示从“选择”到“文本字段”的选定项目？
Posted
技术标签:
【中文标题】如何在 Thymeleaf 中显示从“选择”到“文本字段”的选定项目？【英文标题】：How to display selected item from "select" to "text field" in Thymeleaf? 【发布时间】：2019-05-29 06:39:51 【问题描述】：我正在使用 Thymeleaf 开发简单的 Spring Boot 应用程序，并希望在“userName”文本字段中显示从 Combobox1 中选择的“用户”。我是怎么做到的？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>Добавить цитату</title>
</head>
<body>
<form th:action="@/addQuote"
th:object="$personForm" method="POST">
<p><b>Имя</b><br>
<div>
<input name = "userName" type="text" size="38" th:field="*name" >
<a style="position:fixed;left:0px;top:0px;margin: 0;border-width:0;z-
index:255"></a>
</div>
<textarea name="comment" cols="40" rows="6" th:field="*text" >
</textarea>
<p><input type="reset" value="Отменить">
<input type="submit" value="+"></p>
<select name="Combobox1" size="1" id="Combobox1"
style="position:absolute;left:17%;top:4%;width:199px;height:20px;z-
index:3;" >
<option th:each="user : $users"
th:value="$user"
th:utext="$user"/>
</select>
</form>
<div th:if="$errorMessage" th:utext="$errorMessage"
style="color:red;font-style:italic;">
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：选项 1： 在您的用户名输入标签中添加 Id
<input id="userName" name = "userName" type="text" size="38" th:field="*name" />
添加脚本
<script>
function check()
document.getElementById("userName").value=document.getElementById("Combobox1").value;
</script>
调用脚本函数
<select id="Combobox1" onChange="check();">
选项2：
Jquery 的另一种选择
$(function()
$("#Combobox1").on("change",function()
alert();
$("#userName").val($(this).val());
);
);
【讨论】：
@Aleksey：欢迎。请按回答提问以上是关于如何在 Thymeleaf 中显示从“选择”到“文本字段”的选定项目？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Thymeleaf + spring boot 控制器中显示来自 Flux 的数据
如何使用 Thymeleaf 和 HTML 将数据显示到两列？
Thymeleaf 未在页面上显示正确的字符串，但从模型中正确打印