Question

我想创建一个表单，其中其他选择字段的值会根据您之前选择的内容而发生变化。

例如，如下例所示。您选择一个品牌，然后根据您选择的品牌更改模型的价值。例如，你在第一个选择中选择三星，然后在第二个选择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>

有可能实现这个目标吗？怎么样？

Answer 1

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

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

服务器端

填充品牌并保持模型为空。
当您选择品牌时，请编写javascript以将表单提交到服务器，从而产生品牌和 selectedBrand 以及< strong>模型特定于 selectedBrand

此方法存在的问题是，每次更改品牌价值时都必须刷新页面。

使用ajax的客户端

填充品牌并保持模型为空。
当您选择品牌时，请使用 selectedBrand
返回时返回 json 响应，可能模型。
使用javascript填充模型选择。：）

使用jQuery（更简单）或AngularJS（高收益曲线）

<强>的WebSockets

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

Spring MVC + Thymeleaf - ＆＃34; dynamic＆＃34;选择基于表格

1 个答案: