Html Spring MVC+Thymeleaf-“动态”基于选择的表单

我想创建一个表单，在该表单中，进一步选择字段的值将根据您之前选择的内容进行更改

例如，如下面的示例所示。您选择一个品牌，然后型号的值会根据您选择的品牌而变化。例如，你在第一个选择中选择三星，然后在第二个选择中，你可以选择Galaxy S2、Galaxy S3等等

<form th:action="@{/someAddress}" method="post" th:object="${someObject}">
            <div>
                <select name="brand" >
                    <option th:each="brand : ${brands}" th:value="${brand.id}" th:text="${brand.name}"/>
                </select>
            </div>

            <div>
                <select name="model" >
                    <option th:each="model IN CHOSEN BRAND'S(above) MODELS" th:value="${model.id}" th:text="${model.name}"/>
                </select>
            </div>

            <button type="submit">Submit</button>
    </form>

---

有可能做到这一点吗？如何使用？

是的，在服务器端和客户端都可以使用ajax

免责声明：我不会写任何源代码，因为我相信我会向你解释你自己能够做到的概念。说真的

服务器端

填充品牌并保持模型为空。 选择品牌时，编写javascript将表单提交到服务器，从而生成品牌和所选品牌以及所选品牌的特定型号 这种方法的问题是每次更改品牌价值时都必须刷新页面

使用ajax的客户端

填充品牌并保持模型为空。 当您选择品牌时，请编写javascript以向具有所选品牌的服务器发送ajax请求 它返回一个带有可能模型的json响应。 使用javascript填充模型选择： 使用jQuery Easter或AngularJS高收益曲线

网袋

填充品牌并保持模型为空。 选择品牌时，编写javascript向websocket节点发送调用，获取值并填充select

---

Thymeleaf在服务器端呈现页面。您将需要客户端JavaScript来实现这一点。我知道这在ajax中是可能的。我不是问这个，那就先做吧。通过刷新页面来启动服务器端。没有Ajax。你必须了解基本知识。从服务器端渲染输出后，如果不使用新请求进行另一次渲染，则无法更改输出，除非在客户端使用javascript更改内容：