Spring MVC + Thymeleaf-基於“動態”選擇的表格

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在服務器端和客戶端都可能。

免責聲明：我不會寫任何源代碼，因為我相信可以向您解釋您可以自己實現的概念。 認真！

服務器端

1. 填充品牌並保持模型為空。
2. 當您選擇品牌時，編寫JavaScript以將表單提交到服務器，服務器將生成品牌和selectedBrand以及特定於selectedBrand的模型

這種方法的問題是，每次更改品牌價值時，您都必須刷新頁面。

客戶端與ajax

1. 填充品牌並保持模型為空。
2. 當您選擇品牌時，編寫javascript以使用selectedBrand將ajax請求發送到服務器
3. 作為回報，它會回送一個帶有可能模型的json響應。
4. 使用javascript填充模型選擇。 :)

使用jQuery（更輕松）或AngularJS（高收益曲線）

的WebSockets

1. 填充品牌並保持模型為空。
2. 當您選擇品牌時，編寫javascript將呼叫發送到您的websocket節點，獲取值並填充選擇