根据使用 Thymeleaf 选择的选择选项更改 HTML 表单布局答案

【问题标题】：Changing HTML form layout based on select option selected using Thymeleaf根据使用 Thymeleaf 选择的选择选项更改 HTML 表单布局
【发布时间】：2020-11-28 03:41:47
【问题描述】：

是否可以在 thymeleaf 中设置一个变量，然后根据选择元素中的选项更改它，然后根据选择显示特定的 div？这就是我的意思。

我在选择中有三个选项：

1) DESKTOP_PC
2) LAPTOP_PC
3) TABLET_PC

当用户选择DESKTOP_PC 时，我想显示带有相关输入的 div。同样，如果它是 LAPTOP_PC 或 TABLET_PC。

唯一的问题是，我不知道该怎么做。

另外，我有以下几点：

在我的入门类中，我有一个枚举类：

public static enum Type {
    DESKTOP_PC,
    LAPTOP_PC,
    TABLET_PC
}

在我的 Thymeleaf 表单中，我可以通过以下方式访问和显示此枚举：

<div class="section-question">
    <p>Type</p>
    <select name="type" th:field="$*{type}">
        <option th:each="type : ${T(com.project.entities.Entry.Type).values()}" th:value="${type}" th:text="${type}" ></option>
    </select>
</div>

Any help would be much appreciated!

Thanks

【问题讨论】：

标签： java html spring spring-boot thymeleaf

【解决方案1】：

这很有可能，但与 Java 或 Thymeleaf 关系不大，即使您也可以使用它们（不推荐）

您需要做的就是创建基本的 JavaScript 函数，通过 onClick 到不同的选项使不同的 div 可见（通过添加/删除其中定义了 css 的类，例如 display: none;）。

当然，您可以在后端实现它，通过每次单击都是发送到控制器的单独请求，然后控制器将选项保存到例如布尔变量中，并基于此变量返回不同的百里香视图，但这看起来很尴尬这种不需要后端处理的简单案例的解决方案。

任何简单的 JS 书籍都会告诉你如何做到这一点，我可以推荐 A smarter way to learn JS 用于这种情况

【讨论】：

【解决方案2】：

要实现您想要的，我们需要借助 Javascript 或 jQuery。

在选择标签上写一个 onchange 函数。
获取函数内选择的选项的值。
根据值显示/隐藏 div

如果对你有帮助，请投票

【讨论】：