Changing HTML form layout based on select option selected using Thymeleaf

Is it possible to set a variable in thymeleaf and then change it depending on an option in a select element and then display a specific div based on the selection? Here's what I mean.

I have three options in select:

1) DESKTOP_PC
2) LAPTOP_PC
3) TABLET_PC

When the user selects DESKTOP_PC, I would like to show the div with the related inputs for it. Likewise if it's LAPTOP_PC or TABLET_PC.

Only problem is, I'm not sure how I would go about doing this.

The other thing, is that I have the following:

In my entry class I have an enum class:

public static enum Type {
    DESKTOP_PC,
    LAPTOP_PC,
    TABLET_PC
}

In my Thymeleaf form, I have the following to access and display this enum:

<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

</details>


# 答案1
**得分**: 0

这是可能的，但与Java或Thymeleaf没有太多关系，尽管您也可以使用它们来完成（不建议）。

您只需要创建一个基本的JavaScript函数，当单击不同选项时，会使不同的div可见（通过添加/删除具有在其中定义了`display: none;`的CSS类的类）。

当然，您可以在后端实现它，通过每次单击都是向控制器发送单独的请求，然后将选项保存到例如布尔变量中，并基于此变量返回不同的Thymeleaf视图，但对于这样一个不需要后端处理的简单情况来说，这是一个看起来笨拙的解决方案。

任何一本关于JS的简单书籍都会告诉您如何做到这一点，我可以推荐`A smarter way to learn JS`来应对这种情况。

<details>
<summary>英文:</summary>

it is very possible, but has very little to do with Java or Thymeleaf, even though you could do it with them too (not recommended)

All you need to do is create basic JavaScript function that onClick to different options makes different divs visible (through adding/removing classes with css defined in them like `display: none;`).

Of course you could implement it on backend, through each click being a separate request sent to a controller that then saves the option into a for example boolean variable and based on this variable returns a different thymeleaf view but that is an awkward looking solution for such simple case that doesn&#39;t really require backend processing.

Any simple book on JS will show you how to do this, I can recommend `A smarter way to learn JS` for this scenario

</details>



# 答案2
**得分**: -1

为了实现你想要的功能，我们需要借助 JavaScript 或 jQuery。

1) 在选择标签上编写一个 onchange 函数。
2) 在函数内获取所选选项的值。
3) 根据值的不同显示/隐藏 div。

如果有帮助，请投票。

<details>
<summary>英文:</summary>

To achieve what you want we need to to take help of Javascript or jQuery.

1) Write an onchange function on select tag.
2) Get the value of option selected inside the function.
3) Show/hide div depending on value

Vote if it helps you

</details>