Thymeleaf能否在用户修改值时使用th:if实现元素显隐？

页面中有一个<select>下拉框和一个<input>输入框，需求是根据用户选择的下拉选项，动态隐藏或显示输入框。两个输入框都关联到后端模型，但发现模型值在表单提交前不会更新，尝试用Thymeleaf的th:if判断，但选择Ford后第二个输入框始终不显示。

尝试的代码如下：

<div>
  <label for="model">Model</label>
  <select th:field="*{manufacturer}" th:required="required">
      <option th:value="Ford">Ford</option>
      <option th:value="Tesla">Tesla</option>
      <option th:value="Lotus">Lotus</option>
  </select>
</div>
<div th:if="${car.manufacturer == 'Ford'}">
  <label for="gasType">Gas Type</label>
  <input th:field="*{gasType}" name="gasType" type="text" maxlength="5">
</div>

疑问：能否仅通过Thymeleaf实现该需求，还是必须使用JavaScript？

核心原因 #

Thymeleaf是服务器端模板引擎，页面渲染完成后就会发送到浏览器，后续不会再根据用户的前端操作重新渲染页面。th:if的判断逻辑只在服务器渲染页面时执行一次，用户在浏览器中操作下拉框时，服务器不会重新处理这个判断，所以无法仅通过Thymeleaf实现前端动态交互。

解决方案：使用JavaScript实现动态控制 #

必须借助JavaScript监听下拉框的选择变化，实时控制输入框所在div的显示/隐藏。以下是结合现有代码的实现方案：

1. 给下拉框和目标div添加ID，方便JS定位元素：

<div>
  <label for="model">Model</label>
  <select id="manufacturerSelect" th:field="*{manufacturer}" th:required="required">
      <option th:value="Ford">Ford</option>
      <option th:value="Tesla">Tesla</option>
      <option th:value="Lotus">Lotus</option>
  </select>
</div>
<div id="gasTypeContainer" th:if="${car.manufacturer == 'Ford'}">
  <label for="gasType">Gas Type</label>
  <input th:field="*{gasType}" name="gasType" type="text" maxlength="5">
</div>

2. 添加JavaScript监听下拉框变化，实时切换显示状态：

// 获取页面元素
const manufacturerSelect = document.getElementById('manufacturerSelect');
const gasTypeContainer = document.getElementById('gasTypeContainer');

// 定义更新显示状态的函数
function updateGasTypeVisibility() {
  gasTypeContainer.style.display = manufacturerSelect.value === 'Ford' ? 'block' : 'none';
}

// 页面加载完成后初始化状态
document.addEventListener('DOMContentLoaded', updateGasTypeVisibility);

// 监听下拉框选择变化
manufacturerSelect.addEventListener('change', updateGasTypeVisibility);

补充说明 #

• 保留th:if="${car.manufacturer == 'Ford'}"是为了在页面首次加载时，根据后端模型的初始值正确显示或隐藏输入框。
• JavaScript逻辑负责处理用户后续的交互操作，实时更新显示状态。

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