如何将下拉框选中项应用到其他字段？已尝试JS函数但不知如何设置th:value

看起来你已经走对了方向，只是有几个小细节需要调整，而且关于Thymeleaf的部分其实不用太复杂——毕竟Thymeleaf渲染后就是普通的HTML元素，JS操作起来和纯HTML没太大区别。我帮你梳理下解决方案：

首先，先修正你JavaScript里的一个小错误：selected.option[index]应该是selected.options[index]（注意是复数options），不过其实还有更简洁的写法，直接用selected.value就能拿到选中选项的值，不用绕索引。

然后结合Thymeleaf的完整示例代码：

完整实现代码 #

1. Thymeleaf模板部分

<!-- 下拉选择框：绑定到模型的id字段，onchange触发JS函数 -->
<select th:field="*{id}" onchange="selectSprint(this);">
    <!-- 遍历集合生成选项，这里假设entry有id和name属性 -->
    <option th:each="entry : ${list}" th:value="${entry.id}" th:text="${entry.name}"></option>
</select>

<!-- 目标输入框：可以是普通输入框，也可以是Thymeleaf绑定的字段 -->
<!-- 普通输入框 -->
<input type="text" id="setInput" placeholder="选中的值会填充到这里" />

<!-- 或者绑定到模型中的某个字段（比如selectedSprintId），提交表单后后端能直接拿到这个值 -->
<input type="text" th:field="*{selectedSprintId}" id="setInput" />

2. 修正后的JavaScript函数

<script type="text/javascript">
function selectSprint(selected) {
    // 直接获取选中的选项值，比用索引更简洁可靠
    var selectedSprintValue = selected.value;
    // 获取目标输入框并设置值
    document.getElementById("setInput").value = selectedSprintValue;
}
</script>

关键说明 #

• Thymeleaf的th:value/th:field：如果输入框用th:field绑定模型字段，Thymeleaf会自动生成对应的name和id（如果你没手动设置id的话）。比如th:field="*{selectedSprintId}"会生成id="selectedSprintId"，这时候你需要把JS里的getElementById("setInput")改成getElementById("selectedSprintId")。
• JS操作的是渲染后的HTML：Thymeleaf在服务器端渲染成普通HTML，所以JS和纯HTML页面的操作逻辑完全一致，不需要额外处理Thymeleaf的属性，只要确保元素的id正确即可。
• 表单提交的兼容性：如果输入框是表单的一部分，JS修改后的value会在表单提交时被正常提交到后端，和Thymeleaf初始渲染的值不冲突。

如果还有其他问题，比如需要同步更新多个字段，或者结合AJAX更新后端模型，随时补充细节就行！

内容的提问来源于stack exchange，提问作者Szerszen