Spring MVC + Thymeleaf - 「dynamic」select based form

我想創建一個表單，其中選擇字段的值根據您之前選擇的內容而改變。Spring MVC + Thymeleaf - 「dynamic」select based form

例如，像下面的例子。您選擇一個品牌，然後選擇基於您選擇的品牌的型號更改值。例如，您可以在第一個選擇中選擇Samsung，然後在第二個中選擇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>

是可以做到這一點？怎麼樣？

來源

2015-10-14 Greyshack

Thymeleaf渲染頁面的服務器端。你需要客戶端JavaScript來實現這一點。 –

是的，它可能在服務器端以及客戶端使用ajax。

免責聲明：我不會寫任何源代碼，因爲我相信你會解釋你自己能夠做的概念。認真！

服務器端

填充品牌並保持模式空。
當您選擇品牌編寫JavaScript的形式提交給其導致品牌和SELECTEDBR以及與車型一起具體爲SELECTEDBR以及

服務器
此方法的問題在於，每次更改品牌價值時都必須刷新頁面。使用Ajax

客戶端

填充品牌並保持模式空。
當您選擇品牌編寫JavaScript發送Ajax請求到服務器與SELECTEDBR以及
這與發回具有可能模式一個JSON響應返回。
使用javascript填充模型選擇。:)

使用jQuery（容易）或AngularJS（高收入曲線）

的WebSockets

填充品牌並保持模式空。
當您選擇品牌編寫JavaScript將呼叫發送到您的WebSocket節點，獲取值和填充選擇

來源

2015-10-26 19:07:23

我知道這是可能的阿賈克斯。我並沒有問這個問題。 – Greyshack

然後做第一個。服務器端通過刷新頁面。沒有Ajax。你必須瞭解基礎知識。在從服務器端渲染輸出後，如果沒有使用新請求的其他渲染，則無法更改它，除非您在客戶端使用JavaScript更改了這些內容。 :) –

Spring MVC + Thymeleaf - 「dynamic」select based form

回答

相關問題