Thymeleaf中基于下拉框值条件显示下拉框失效问题排查

你遇到的问题不是Thymeleaf的bug，是对th:if的用法理解有误。Thymeleaf是服务端渲染模板，th:if只会在页面加载时执行一次，根据后端传入的初始值判断是否渲染元素，没法监听前端下拉框的实时选择变化。所以不管你用${advertType == 'OnAir'}还是${advert.advertType == 'OnAir'}，都只能控制页面加载时第二个下拉框是否显示，用户后续切换第一个下拉框的选项时，页面不会自动更新。

要实现根据第一个下拉框的选中值动态显示第二个下拉框，得用前端JavaScript来处理，具体步骤如下：

1. 移除第二个下拉框的th:if，初始状态可以根据后端传入的advert值控制显示/隐藏，默认也可设为隐藏；
2. 给第一个下拉框添加id，方便JS获取元素；
3. 编写JS监听下拉框的change事件，根据选中值切换第二个下拉框的显示状态。

修改后的代码示例：

<form advert="form" autocomplete="off" class="sky-form" method="post" name="form" th:action="@{/adverts/save}"
    th:object="${advert}">

    <div class="form-group">
        <label>Select Type of advert</label>
        <!-- 给下拉框添加id -->
        <select id="advertTypeSelect" class="form-control" required="required" th:field="*{advertType}">
            <option value="">----Select----</option>
            <option th:each="type : ${advertTypes}" th:text="${type.name}" th:value="${type.name}">
            </option>
        </select>
    </div>

    <!-- 初始状态根据后端值控制显示/隐藏 -->
    <div class="form-group" id="station" th:style="${advert.advertType == 'OnAir'} ? 'display:block' : 'display:none'">
        <label>Select Radio Station</label>
        <select class="form-control" th:field="*{radioStation}">
            <option value="">----Select a Radio Station----</option>
            <option th:each="radioStation : ${radioStations}" th:text="${radioStation.name}"
                th:value="${{radioStation}}">
            </option>
        </select>
    </div>
</form>

<script>
// 监听广告类型下拉框的变化
document.getElementById('advertTypeSelect').addEventListener('change', function() {
    const stationDiv = document.getElementById('station');
    // 根据选中值切换显示状态
    stationDiv.style.display = this.value === 'OnAir' ? 'block' : 'none';
});
</script>

注意：如果你的advertType是枚举类型，建议把option的th:value设为枚举的name值（比如${type.name}），这样前端拿到的是明确的字符串，避免因枚举对象序列化导致的判断误差。

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